[英]How to run code after Knockout JS has updated the DOM
作為我觀點的一部分,我有:
<ul data-bind="foreach: caseStudies">
<li><a data-bind="text: title, attr: { href: caseStudyUrl }"></a></li>
</ul>
我想在淘汰更新DOM后運行一些第三方代碼。
caseStudies(data);
thirdPartyFuncToDoStuffToCaseStudyLinks(); <-- DOM not updated at this point.
關於我如何能夠在正確的時間進入淘汰賽的想法?
使用afterRender
綁定可以幫助您。
<ul data-bind="foreach: { data:caseStudies, afterRender:checkToRunThirdPartyFunction }">
<li><a data-bind="text: title, attr: { href: caseStudyUrl }"></a></li>
</ul>
function checkToRunThirdPartyFunction(element, caseStudy) {
if(caseStudies.indexOf(caseStudy) == caseStudies().length - 1){
thirdPartyFuncToDoStuffToCaseStudyLinks();
}
}
一種准確的方法是使用KnockoutJS順序應用綁定的事實(因為它們在html中呈現)。 您需要在'foreach-bound'元素之后定義一個虛擬元素,並定義調用您的第三方函數的'text'綁定。
這是html:
<ul data-bind="foreach: items">
<li data-bind="text: text"></li>
</ul>
<!-- ko text: ThirdParyFunction () -->
<!-- /ko -->
這是代碼:
$(function () {
var data = [{ id: 1, text: 'one' }, { id: 2, text: 'two' }, { id: 3, text: 'three' } ];
function ViewModel(data) {
var self = this;
this.items = ko.observableArray(data);
}
vm = new ViewModel(data);
ko.applyBindings(vm);
});
function ThirdParyFunction() {
console.log('third party function gets called');
console.log($('li').length);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.