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>

当 click 事件触发时，该项目将从数组中删除，但 if 绑定没有得到更新并且 ui 格式已关闭。我试图避免重新加载数据，因为 ui 块在删除和重新加载时会反弹。

4

1 回答 1

3

您的 UI 没有更新，因为当您分配给 时Count，您没有分配为可观察对象。您正在用一个直接的布尔值替换 observable。因此，您的作业调用如下：

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

将导致viewModel.foos[index].Count等于true或false，并且该值不会存储在可观察对象中。

那条线应该是这样的：

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

这将正确设置可观察对象。请注意，您必须将所有分配更改为以这种方式设置的可观察对象。请参阅本页的“读写 Observables”部分：Knockout Observables。

于 2012-07-13T15:06:58.593 回答