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);
    }
};

このハンドラーは、更新が発生するたびに (値が監視可能でない場合は 1 回だけ) 起動します。

さらに重要なのは、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 に答える