如何淘汰赛JS已经更新了DOM后运行代码(How to run code after Knockou

由于我的部分观点，我有：

<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.

我如何可以挂接到淘汰赛在正确的时间来调用这个任何想法？

Answer 1:

使用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();
    }
}

Answer 2:

一个准确的方法是使用一个事实，即KnockoutJS顺序应用绑定（因为它们是在HTML呈现）。 您需要后“的foreach绑定”元素定义一个虚拟元素和定义“文本”绑定，调用你的第三方功能。

这里是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);
    }

文章来源: How to run code after Knockout JS has updated the DOM