Binding css class to Observable Array item.chosen value with knockout.js

Question

I'm fairly new to Knockout.js so I may simply be missing something. I'm trying to create a set of divs that work as buttons where their 'selected' state reflects a subvalue of an item in an array.

See this fiddle: http://jsfiddle.net/bleiddyn/RepnY/

Excerpt:

    $('.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();
    });

The initial display of the divs is correct. It seems that I can make the click event change the value inside the observable array without issue. The displayed divs do not change css class in response to this though.

I realize that the children of an object that is an item in an array are not, by themselves, observable. However, shouldn't my call to valueHasMutated() force the issue? This is likely also not the most elegant way to accomplish the behavior.

Anyone want to help a learning javascript guy out?

Answer 1

In order for the bound property to be updated, you must make the property in question observable. Also, you don't need jQuery here to handle the click event, you can use the event binding to accomplish that:

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

​Example: http://jsfiddle.net/andrewwhitaker/RepnY/1/