Sadece knockout.js (hep bunu denemek istedim, ama şimdi nihayet bir bahane!) ile başladım - Ancak, veri nispeten küçük bir set (400 satır civarında) bir tabloya bağlanırken çok kötü bir performans sorunlarla karşılaştım.

Benim model aşağıdaki kodu var:

this.projects = ko.observableArray( [] ); //Bind to empty array at startup

this.loadData = function (data) //Called when AJAX method returns
{
   for(var i = 0; i < data.length; i  )
   {
      this.projects.push(new ResultRow(data[i])); //<-- Bottleneck!
   }
};

Sorun yaklaşık 400 satır ile yaklaşık 30 saniye sürer yukarıda for döngü. Eğer kodu değiştirirsem ancak:

this.loadData = function (data)
{
   var testArray = []; //<-- Plain ol' Javascript array
   for(var i = 0; i < data.length; i  )
   {
      testArray.push(new ResultRow(data[i]));
   }
};

for döngü bir göz açıp kapayıncaya kadar tamamlar. Diğer bir deyişle, Nakavt push yöntemi observableArray nesne inanılmaz derecede yavaş.

İşte benim şablon:

<tbody data-bind="foreach: projects">
    <tr>
       <td data-bind="text: code"></td>
       <td><a data-bind="projlink: key, text: projname"></td>
       <td data-bind="text: request"></td>
       <td data-bind="text: stage"></td>
       <td data-bind="text: type"></td>
       <td data-bind="text: launch"></td>
       <td><a data-bind="mailto: ownerEmail, text: owner"></a></td>
    </tr>
</tbody>

Soru:

1. Bunu doğru bir şekilde gözlemlenebilir bir koleksiyon için benim veri bir AJAX yöntemi gelir) bağlamak için mi?
2. push re-calc biraz ağır yapıyor bekliyorum ben aramak her zaman, belki de bağlı DOM nesneleri yeniden oluşturma gibi. Bir taraftan da bu recalc gecikme veya tüm öğeleri aynı anda bas belki.

Gerekirse daha fazla kod ekleyebilirsiniz, ama bu konuyla ilgili ne olduğuna oldukça eminim. Çoğunlukla sadece sitesinden Nakavt öğreticiler takip ediyordum.

GÜNCELLEME:

Tavsiyeler aşağıda başına, benim kodu güncelledik:

this.loadData = function (data)
{
   var mappedData = $.map(data, function (item) { return new ResultRow(item) });
   this.projects(mappedData);
};

Ancak, this.projects() hala 400 satır için yaklaşık 10 saniye sürer. Bu nasıl emin değilim kabul ediyorumolmadanNakavt (DOM ile satır ekleme), ama 10 saniye daha hızlı olacak gibi bir his var içimde.

GÜNCELLEME 2:

Diğer öneriler aşağıda başına verdimbir WordPress kullanmak.tmplateş doğal Nakavt tarafından desteklenmektedir), ve bu şablon motoru sadece 3 saniyede 400 satır çizin. Bu en iyi yaklaşım gibi, dinamik olarak kaydırma olarak daha fazla veri yüklemek çözüm kısa görünüyor.

Lütfen bakın: Knockout.js Performance Gotcha #2 - Manipulating observableArrays

Daha iyi bir model alttaki bizim dizi için bir başvuru almak, itmek, çağırmak için var .() valueHasMutated. Şimdi, bizim aboneleri tek bir bildirim dizi değiştiğini belirten alacak.