Knockout JS ve büyük modeller

Question

KnockoutJS'yi kullanmanın en iyi yollarını bulmaya çalışıyorum ve tavsiyenize ihtiyacım var.

Görünüm modelim, her birinde "değerler" kümesi bulunan bir dizi "belge" içerir. Her "belge" Aşağıdaki şablonu kullanarak ayrı tablo olarak düzenlenir:

<div data-bind="foreach: Documents"> 
     <table data-bind="foreach: Values"> 
      <tr data-bind="foreach: $data"> 
       <td data-bind="attr: {colspan: Colspan}"> 
        <label data-bind="text: Label"></label> 
        <br /> 
        <span data-bind="html: Value"></span> 
       </td> 
      </tr> 
     </table> 
</div> 

Her şey görünümü modelleri büyük olduğu durumlar dışında çalışıyor. Örneğin, bir görünüm modelinin boyutu yaklaşık 1 megabaytsa (ve her biri 60 değer içeren 80 belge içeriyorsa), görüntülemenin makinemde iki dakikadan uzun sürmesi gerekiyorsa. önemli ölçüde performansını artırmak için ... Ya da Knockout vazgeçmek ve sadece sunucu tarafında html oluşturmak ve sadece tarayıcıya itmek hızlı olacaktır bir yolu varsa

ben ... merak ediyorum

"Sadece" 300kb görünüm modelinin oluşturulması 30 saniyeye kadar yaklaşıyor.

"Belgeler" kullanıcılar tarafından tanımlanmıştır, bu nedenle> 2 megabaytlık senaryo bile vardır (bunu neden yaptıkları bilmiyorum).

JavaScript'te büyük görüntüleme modelleriyle ilgili deneyim sahibi olan var mı?

Answer 1

Mevcut tembel yükleme gereksiniminiz (isteğe bağlı) verilerinizle oldukça sınırlıdır.

SUNUCU YAN HTML

HTML sunucu tarafı oluşturuluyor en hızlı yöntem olacaktır. Ancak, model çok büyük olsa bile, bir gecikme olacak. Bir 5 MB HTML dosyası indirmeyi düşünün, tarayıcınızı biraz daha büyük bir şeyleri ayrıştırmak ve işlemek için biraz zaman alacak. Hala benim en iyi öneri bir IFRAME içinde her Belgesi alınır sonra Nakavt JS framework kullanmak istiyorsanız

HALA KNOCKOUT JS

KULLANIN. Bu gerçekten tavsiye edilmez ve sunucunuza fazladan yüklenir, ancak doğru şekilde uygulandığında kullanıcı deneyiminizi hızlandırabilir.

www.mysite.com/view/1 

<div> 
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div> 
<div> 
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div> 
... 

www.mysite.com/view/1/document/1 

<!-- Just the single Document template --> 
    <table data-bind="foreach: Values"> 
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: {colspan: Colspan}"> 
       <label data-bind="text: Label"></label> 
       <br /> 
       <span data-bind="html: Value"></span> 
      </td> 
     </tr> 
    </table> 

istemci tarayıcısı başlangıçta IFRAME'ler tümünü içeren tüm HTML her zaman uyumsuz için istekleri gönderecek alacak. Her bir Belge isteği, eşzamanlı olarak kendi çerçevesindeki Knockout JS kullanılarak oluşturulacaktır.

Kullanıcı etkileşimini geliştirmek için IFRAME'lerde bile yükleme olayları oluşturabilirsiniz. Yükleme olayı, IFRAME boyutunu yeniden boyutlandırabilir, böylece kaydırma çubuğu bulunmaz veya HTML'yi IFRAME'den ayıklayabilir ve IFRAME öğesini çıkartılan HTML ile değiştirebilir.

Answer 2

Yerel şablon altyapısı KO'da özellikle hızlı değil. Önce jQuery.tmpl motorunu (described here) deneyeceğim. Bu yeterince hızlı değilse, işlenmekte olan içerik miktarını azaltmayı düşünmelisiniz; örneğin başlangıçta her bir belge için bir başlık oluşturup, seçildiğinde veya genişletildiğinde ayrıntıları görüntüleyebilirsiniz.

Answer 3

Uygulamanızın nasıl çalıştığından emin değil, aynı anda tüm içeriği göstermeniz gerekmiyorsa, modelinizi parçalara ayırabilirsiniz.Uygulamalarımdan birinde olduğu gibi, büyük bir liste listesi olan bir görünüm modelim var, ancak yalnızca tabloda görülebilen şeyler içeriyor. Görünüm ayrıca daha fazla bilgiye sahip olan öğe girişini seçti ve listeden bazı girişler seçildiğinde onu yerleştiririm.

Genel olarak, kullanıcıların UI'de hiç yapılmadığı görünüm modeline her türlü şeyi koyduğu birkaç kez gördüm. Eşyalarınızı doğrudan sunucudan alırsanız bazı avantajları vardır, ancak diğer yandan görünüm modelini şişirebilir.