Question

我指定了一些敲除绑定。我需要在渲染整个页面后运行一些脚本。

<div class="row-fluid" data-bind="foreach: { data: rows, afterRender: myCallback }">
</div>

不幸的是，myCallback被过早调用 - 并非所有DOM元素都被渲染，元素的大小尚未计算（更重要的是，myCallback需要调用插件的init函数，这需要计算所有元素大小）

当呈现页面上的所有DOM元素（并应用绑定）时，如何调用myCallback？

更新我写了一个小黑客：

<div class="location-map-div" data-bind="openLayers: Value, attr: { style: 'width: 50%; height: 200px' }" style="width:100px; height:100px"></div>

我设置了内联样式，因此我的插件可以初始化，然后通过敲除绑定更改大小。

Answer 1

为你的＆＃39;行中的每个元素调用afterRender。阵列。你应该检查你是否在最后一个元素上。

<div class="row-fluid" data-bind="foreach: { data: rows, afterRender: thenDoStuff }">
</div>

viewModel.lastItem = ko.computed(function() {
    return this.items()[this.items().length - 1];
}, viewModel);

viewModel.thenDoStuff = function(elements, data) {
    if (data === viewModel.lastItem()) {
        alert('last one!');
        var parent = $(elements).filter('li').parent();
    }
};

以下是我找到并修改后的示例：http://jsfiddle.net/Z6yqq/8/

Answer 2

您可以创建一个在渲染过程中调用事件的自定义绑定：

ko.bindingHandlers.onRender = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var events = ko.unwrap(value);

       if(events.once)
           events.once.call();
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var events = ko.unwrap(value);

       if(typeof events == 'function')
          events.call();

        if(events.each)
           events.each.call();
    } 
};

绑定应如下使用：

<div data-bind="onRender:{once: firstCall, each: eachCall}"/>

每次敲门都会渲染这个div，将调用eachCall函数。

See fiddle

淘汰赛后，莱克斯太早开火

2 个答案: