1

項目を削除する配列がありますが、UI の書式設定を行う項目の数を数えています。バインドを更新できるようにする必要があります。

    ko.applyBindings(viewModel);
    getFoos();


var viewModel = {
    foos: ko.observableArray([]),

    reloadFoos: function () {
        getFoos();
    },

    removeFoo: function () {
        remove(this);
    }
};

var foo = function () {
    this.Id = ko.observable();
    this.Name = ko.observable();
    this.Count = ko.observable();
};

function remove(foo) {
    viewModel.foos.splice(viewModel.foos.indexOf(foo), 1);

    viewModel.foos.each(function(index) {
        viewModel.foos[index].Count = index%10 == 0;
    });
}

function getFoos() {
    viewModel.foos([]);
    $.get("/myroute/", "", function (data) {

        for (var i = 0; i < data.length; i++) {
            var f = new foo();
            f.Id = data[i];
            f.Name = data[i];
            f.Count = i%10 == 0;
            viewModel.foos.push(f);
        }

    });
}

            <div data-bind="foreach: foos">
                <div style="float: left">
                        <a href="javascript:void(0);" data-bind="click : $parent.removeFoo, attr: { id: Id }">
                            <label data-bind="value: Name"></label>
                        </a>
                </div>
                <!-- ko if: Count -->
                <div style="clear: left"></div>
                <!-- /ko -->
            </div>

クリック イベントが発生すると、アイテムは配列から削除されますが、if バインドは更新されず、UI の書式設定はオフになります。削除してリロードするとUIブロックが跳ね返るため、データをリロードしないようにしています。

4

1 に答える 1

3

への割り当てを行うときに、監視対象として割り当てていないため、UI は更新されていCountません。オブザーバブルをストレートブール値に置き換えています。したがって、割り当ては次のように呼び出します。

viewModel.foos[index].Count = index%10 == 0;

またはとviewModel.foos[index].Count等しくなり、値はオブザーバブルに保存されません。truefalse

代わりに、その行は次のようになります。

viewModel.foos[index].Count(index%10 == 0);

これにより、オブザーバブルが正しく設定されます。このように設定するには、すべての割り当てをオブザーバブルに変更する必要があることに注意してください。このページの「Observable の読み取りと書き込み」セクションを参照してください: Knockout Observables .

于 2012-07-13T15:06:58.593 に答える