33

私の見解の一部として、私は次のことを行っています。

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

ノックアウトにフックして正しいタイミングでこれを呼び出す方法について何かアイデアはありますか？

4

2 に答える 2

37

バインディングを使用すると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();
    }
}
于 2013-01-18T13:57:35.013 に答える
18

正確な方法の1つは、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);
    }
于 2013-01-18T13:36:26.923 に答える