Knockout JS 更新 DOM 后如何运行代码答案

【问题标题】：How to run code after Knockout JS has updated the DOMKnockout JS 更新 DOM 后如何运行代码
【发布时间】：2017-02-12 15:27:39
【问题描述】：

作为我观点的一部分，我有：

<ul data-bind="foreach: caseStudies">
    <li><a data-bind="text: title, attr: { href: caseStudyUrl }"></a></li>
</ul>

我想在淘汰赛更新 DOM 后运行一些第 3 方代码。

caseStudies(data);
thirdPartyFuncToDoStuffToCaseStudyLinks(); <-- DOM not updated at this point.

知道如何在正确的时间加入淘汰赛吗？

【问题讨论】：

您到底想改变什么？这些属性是否已经出现在 caseStudies 中？
我不想更改任何我需要第三方库将事件附加到链接的内容。
你能给我们一个小提琴吗？

标签： javascript knockout.js

【解决方案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();
    }
}

【讨论】：

干杯，这就是我要找的东西
如果我使用的不是“foreach”，比如“option”，该怎么办？
@AbdelHady 你可以使用 optionsAfterRender 回调：knockoutjs.com/documentation/options-binding.html
这不适用于后续更新。例如。 caseStudies.reverse() 即使 DOM 发生了变化也不会回调

【解决方案2】：

一种准确的方法是利用 KnockoutJS 顺序应用绑定的事实（因为它们在 html 中呈现）。您需要在“foreach-bound”元素之后定义一个虚拟元素，并定义调用您的第三方函数的“文本”绑定。

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

【讨论】：

afterRender 导致重复的事件触发器，这种方法对我来说效果很好。
老兄！！那真是太棒了..非常感谢分享
非常重要的注意事项：我已经多次使用此方法，只要确保您阅读需要重新运行代码的任何可观察更改的值。示例：函数 ThirdParyFunction(){ this.label(); console.log('每次更改标签时运行第 3 方代码'); } 否则 - 此代码将只运行一次。