javascript - foreach 完成渲染时的自定义绑定(bind)

Question

我有一个可观察数组，其中的项目绑定(bind)到 ul。添加项目后，我需要计算整组 li 项目的宽度，这样我就可以将 ul 元素的宽度设置为子元素的总宽度li 元素。

我怎样才能使用 foreach 绑定(bind)来做到这一点？

<div>
    <h2 data-bind="visible: items().length">Test</h2>
    <ul data-bind="foreach: { data: items, afterAdd: $root.myAfterAdd }">
        <li data-bind="text: name"></li>
    </ul>
</div>

和 JavaScript:

var viewModel = {
    items: ko.observableArray([
        { name: "one" },
        { name: "two" },
        { name: "three" }
        ]),
    myAfterAdd: function(element) {
        if (element.nodeType === 1) {
           alert("myAfterAdd");   
        }
    },
    addItem: function() {
        this.items.push({ name: 'new' });
    }
};


ko.applyBindings(viewModel);

// once foreach has finished rendering I have to set the width 
// of the ul to be the total width of the children!

我尝试使用 afterAdd 这样我就可以在添加每个元素后“更新”ul 的宽度，不幸的是我发现了 afterAdd 初始元素不会开火!它只会在推送其他项时触发...

请注意，li 项中的内容的宽度未知:)

参见 this fiddle示例场景。

Answer 1

我遇到了类似的问题。您可以使用它来进行初始计算:

ko.bindingHandlers.mybinding {
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var foreach = allBindings().foreach,
                subscription = foreach.subscribe(function (newValue) {
                // do something here (e.g. calculate width/height, use element and its children)
                subscription.dispose(); // dispose it if you want this to happen exactly once and never again.
            });
        }
}