我对Knockout.js相当陌生,所以我可能只是想念一些东西.我正在尝试创建一组用作按钮的div,其中它们的“选定”状态反映了数组中某个项目的子值.

看到这个小提琴：http://jsfiddle.net/bleiddyn/RepnY/

摘抄：

    $('.tag-cell').click(function() {
        var ele = event.srcElement.textContent;
        var match = ko.utils.arrayFirst(self.Tags(), function(item) {
            if (ele === item.title) {
                item.chosen = !item.chosen;
                return true;
            }
            return false;
        });

        match.chosen = true;
        self.Tags.valueHasMutated();
    });

div的初始显示是正确的.看来我可以使click事件更改可观察数组内的值而不会出现问题.但是,显示的div不会响应于此而更改css类.

我意识到,作为数组中一项的对象的子项本身是不可观察的.但是,我对valueHasMutated()的调用是否应该强制执行此问题？这也可能不是完成行为的最优雅的方法.

任何人都想帮助学习javascript的人吗？

解决方法:

为了更新绑定属性,必须使相关属性可观察.另外,您无需在这里使用jQuery来处理click事件,您可以使用事件绑定来完成此操作：

function item(options) {
    var self = this;
    this.title = ko.observable(options.title);
    this.level = ko.observable(options.level);
    this.chosen = ko.observable(options.chosen);
    this.toggleItem = function () {
        self.chosen(!self.chosen());
    };
}

function myViewModel() {
    var self = this;
    self.Tags = ko.observableArray([
        new item({
        title: 'Tag1',
        level: 'Primary',
        chosen: true
    }),
        new item({
        title: 'Tag2',
        level: 'Primary',
        chosen: false
    }),
        new item({
        title: 'Tag3',
        level: 'Primary',
        chosen: false
    }),
        new item({
        title: 'Tag4',
        level: 'Primary',
        chosen: false
    }),
        new item({
        title: 'OtherTag',
        level: 'Secondary',
        chosen: false
    })]);


    self.PrimaryTags = ko.computed(function() {
        return ko.utils.arrayFilter(this.Tags(), function(tag) {
            return tag.level() === 'Primary';
        });
    }, self);
    self.SecondaryTags = ko.computed(function() {
        return ko.utils.arrayFilter(this.Tags(), function(tag) {
            return tag.level() === 'Secondary';
        });
    }, self);

}

var vm = new myViewModel();
ko.applyBindings(vm);

例子：http://jsfiddle.net/andrewwhitaker/RepnY/1/