Knockout afterRender, ancak sadece bir kez

Question

Çok sayıda kullanıcı modeli içeren basit bir gözlemlenebilir dizi var. İşaretlemede, kullanıcıları döngüleyen ve bunları basit bir tabloda çıkaran bir foreach döngüsüne sahip bir şablon vardır. Ek olarak tabloyu özel bir kaydırma çubuğu ve başka bir javascript ile şekillendiriyorum. Yani şimdi foreach döngüsünün ne zaman biteceğini ve tüm modellerin DOM'a eklendiğini bilmeliyim.

AfterRender geri çağırma ile ilgili sorun, her şey eklendiğinde çağrılmasıdır, ancak yalnızca bir kez tetiklenen bir geri bildirime ihtiyacım var.

Answer 1

Yapabileceğiniz en iyi şey, bir özel kullanmaktır Test edilmedi bağlayıcı. Özel bağlayıcınızı foreach sonra data-bind bağlama listesinde yerleştirebilir veya kodunuzu yürütülmeden önce içerik oluşturmak için foreach izin vermek için kodunuzu bir setTimeout içinde yürütebilirsiniz. İşte

kodu tek çalışma süresi ve kodu her zaman çalışan gösterir bir örnek olduğunu da observableArray güncellemeler: http://jsfiddle.net/rniemeyer/Ampng/

HTML:

<table data-bind="foreach: items, updateTableOnce: true"> 
    <tr> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: name"></td> 
    </tr> 
</table> 

<hr/> 

<table data-bind="foreach: items, updateTableEachTimeItChanges: true"> 
    <tr> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: name"></td> 
    </tr> 
</table> 

<button data-bind="click: addItem">Add Item</button> 

JS:

var getRandomColor = function() { 
    return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
}; 

ko.bindingHandlers.updateTableOnce = { 
    init: function(element) { 
     $(element).css("color", getRandomColor());    
    }  
}; 

//this binding currently takes advantage of the fact that all bindings in a data-bind will be triggered together, so it can use the "foreach" dependencies 
ko.bindingHandlers.updateTableEachTimeItChanges = { 
    update: function(element) {  
     $(element).css("color", getRandomColor()); 
    }  
}; 


var viewModel = { 
    items: ko.observableArray([ 
     { id: 1, name: "one" }, 
     { id: 1, name: "one" }, 
     { id: 1, name: "one" } 
    ]), 
    addItem: function() { 
     this.items.push({ id: 0, name: "new" }); 
    } 
}; 

ko.applyBindings(viewModel); 

Answer 2

Sadece kapalı kafamın üst yapabildin ya:

• yerine afterRender olayın içine çengel, basitçe/itme var dizide bir öğe attı sonra işlevini çağırır. Veya gözlemlenebilirArray'ı, kendi alt öğelerinin altından kendi afterRender olayına sahip olan gözlenebilir bir kutuya sarın. foreach döngüsü şöyle ebeveyn gözlemlenebilir başvurmak gerekir:

Örnek:

<div> 
    <div data-bind="with: parentItem(), template: { afterRender: myRenderFunc }" > 
     <div data-bind="foreach: observableArrayItems"> 
      ... 
     </div> 
    </div> 
    </div> 

bu yüzden sadece tahmin ...

Answer 3

Hızlı ve basit bir şekilde, AfterRender işleyicinizde, geçerli öğeyi listenizdeki son öğeyle karşılaştırın. Eşleşirse, bu, Sonuncu çalıştırıldıktan sonraki son zamandır.

Answer 4

Foreach şablonunun görüntülemeyi tamamladığını öğrenmek için "kukla" ciltleme yapabilir ve geçerli işlenen öğe dizinini işleyicinize iletebilir ve dizi uzunluğuna uyup uymadığını kontrol edebilirsiniz.

HTML:

<ul data-bind="foreach: list"> 
    <li> 
    \\ <!-- Your foreach template here --> 
    <div data-bind="if: $root.listLoaded($index())"></div> 
    </li> 
</ul> 

ViewModel - Handler: Listeye daha fazla öğe eklemek istiyorsanız

this.listLoaded = function(index){ 
    if(index === list().length - 1) 
     console.log("this is the last item"); 
} 

ekstra bayrak tutun.

Answer 5

Zarif bir hile ile geldim.Kabul cevap veri bağlamaları artık sırayla çalıştırılır olarak bunları bildirmek (nakavt-3.x çalışacak olmadığını

<!--ko foreach: { data: ['1'], afterRender: YourAfterRenderFunction } --> 
<!--/ko--> 

Answer 6

emin değilim: derhal şablon/foreach bloğundan sonra, bu kodu ekleyin).

İşte başka bir seçenek, sadece bir kez ateş edecek.

ko.bindingHandlers.mybinding { 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      var foreach = allBindings().foreach, 
       subscription = foreach.subscribe(function (newValue) { 
       // do something here 
       subscription.dispose(); // dispose it if you want this to happen exactly once and never again. 
      }); 
     } 
} 

Answer 7

Nasıl bir debouncer kullanılıyor?

var afterRender = _.debounce(function(){  

    // code that should only fire 50ms after all the calls to it have stopped 

}, 50, { leading: false, trailing: true}) 

Answer 8

Jaffa'nın yanıtı bir hata içeriyor, bu yüzden yorum yapmak yerine yeni bir yanıt oluşturmaya karar verdim. Aynı anda hem şablon hem de şablon kullanmak mümkün değildir. Dolayısıyla, sadece şablonun data etiketi

html modelinizi taşımak

<div data-bind="template: {data: myModel, afterRender: onAfterRenderFunc }" > 
    <div data-bind="foreach: observableArrayItems"> 
     ... 
    </div> 
</div> 

JavaScript

var myModel = {  
    observableArrayItems : ko.observableArray(), 

    onAfterRenderFunc: function(){ 
    console.log('onAfterRenderFunc') 
    } 

} 
ko.applyBinding(myModel);