Question

我有一个数组，我正在删除项目，但我正在计算用于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块在移除和重新加载时反弹。

Answer 1

您的用户界面未被更新，因为当您对Count进行分配时，您不会将其指定为可观察对象。您正在用直布尔值替换observable。所以，你的作业就是这样的：

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

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

该行应改为：

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

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

数组更新后的knockout绑定

1 个答案: