2

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

我怎样才能通过foreach绑定来做到这一点？

<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将是未知宽度:)

请参阅此小提琴以获取示例场景。

4

3 回答 3

2

我有一个类似的问题。您可以使用它来进行初始计算：

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.
            });
        }
}
于 2014-03-13T15:48:25.790 回答
1

经过多次“谷歌搜索”，我找到了解决方案。使用 foreach 实现此目的的方法也是注册自定义事件处理程序：

ko.bindingHandlers.runafter = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        setTimeout(function (element, value) {
            if (typeof value != 'function' || ko.isObservable(value))
                throw 'run must be used with a function';

            value(element);
        }, 0, element, value);
    }
};

只要发生更新（或者如果值不是可观察的，则仅触发一次），此处理程序将触发。

更重要的是，一旦 foreach 循环完成，它将触发！

见这里。

于 2013-05-17T16:35:46.737 回答
0

你可以做这样的事情：

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


$('#bucket').bind('DOMNodeInserted DOMNodeRemoved', viewModel.myAfterAdd);

ko.applyBindings(viewModel);

哪个桶是ul元素

见小提琴

我希望它有帮助

于 2013-05-16T18:56:17.433 回答