ノックアウトのjsとソートの問題

Question

私はオンラインで検索していましたが、私は観測可能な配列に並べ替え作業を行うことはできないようです。私はどこかではなく、必ず間違いなく間違っている場合は、ここではコードです：

var availableProducts = [{"Id":"1","Description":"Product 1","Rate":2956.00},{"Id":"3","Description":"Product 2","Rate":1518.00},{"Id":"2","Description":"Product 3","Rate":750.00}]; 

function productViewModel() { 
    var self = this; 
    self.products = ko.observableArray(); 
} 

var productDetails = new productViewModel(); 
$(document).ready(function() { 

    productDetails.products = (availableProducts); 
    ko.applyBindings(productDetails, document.getElementById("product-edit")); 

} 

そしてHTMLは次のようになります。だから、IDが順番1、3、2である見ることができるように

<tbody data-bind="foreach: sortedProducts"> 
    <tr> 
     <td><span data-bind="text: Description"></span></td> 
     <td><span data-bind="currency: Rate"></span></td> 
    </tr> 
</tbody> 

私はそれらを並べ替えて順番に表示したいと思いますが、商品を並べ替えることはできません。私は、これは動作しませんでした私のViewModel

に

self.sortedProducts = function() { 
    return self.products().sort(function (a,b) { 
     return a.Id < b.Id ? -1 : a.Id > b.Id ? 1 : 0; 
}); 

を以下のように入れてみました、私はproductDetailsでselfの交換を除いて、「$（ドキュメント）.ready（...）」に同一のコードを追加し、その後試みたが、うまくいきませんでした。私はデータをソートするためにボタンを呼び出させたくないので、それらを提示する前にソートしておきたい。

Answer 1

ソート機能は正常に機能していますが、サポートされているブラウザが実際にArray.prototype.sortに渡されたcompareFunctionを実際に理解しているかどうかを確認する必要があります。それはちょっと前に私が遭遇した問題です。

1）ko.observableArray()をネイティブ配列availableProductsで上書きしています。これはゲッター構文​​self.products()でプロパティにアクセスするとエラーになります。

2）テンプレート内のバインディングは、観測可能な配列ではなくプレーン関数を渡しているので機能しないはずです。関数オブジェクト自体のプロパティを実際に反復処理すると思います（.length 、.prototype、.hasOwnPropertyなど）。

3）大きな配列の処理を計画している場合は、効率的な観測可能な配列を配列に追加するライブラリKnockout Projectionsを使用することをお勧めします。私の経験では、コレクション内の1000個以上のアイテムについては、投影機能なしではUIはそれほど流動的ではありません。

この上の私のテイクは次のようになります。これは、動的にロードされるため

私が使用

var availableProducts = [{"Id":"1","Description":"Product 1","Rate":2956.00},{"Id":"3","Description":"Product 2","Rate":1518.00},{"Id":"2","Description":"Product 3","Rate":750.00}]; 

function productViewModel() { 
    var self = this; 
    // In case you know the products at this stage you could just 
    // specify it as the first argument 
    self.products = ko.observableArray(/* [{...}] */); 

    // The sorted products are computed from the original ones 
    self.sortedProducts = ko.computed(function() { 
     // I'd probably use explicit parens for better 
     // readability - I had to look twice to get the comparer :-) 
     return self.products().sort(function (a, b) { 
      return a.Id < b.Id ? -1 : (a.Id > b.Id ? 1 : 0); 
     }); 

     //// With ko-projections this would become: 
     //// (note the missing parens on `products`) 
     //return self.products.sort(function (a, b) { 
     // return a.Id < b.Id ? -1 : a.Id > b.Id ? 1 : 0; 
     //}); 
    }); 
} 

var productDetails = new productViewModel(); 
$(document).ready(function() { 
    // Set the observable array value 
    productDetails.products(availableProducts); 
    ko.applyBindings(productDetails, document.getElementById("product-edit")); 

});