Binding a ko.observableArray to list of { value, text } options

Question

This jsFiddle displays the incorrect code for my objective. I'd like every time the user selects a Day for that day to be added/removed to the byday list. Using Knockout 2.1.0.

HTML:

<ul data-bind="foreach: bydayOptions">
    <li>
        <input type="checkbox" name="byday" data-bind="attr: {value: value, checked: $parent.byday().indexOf(value) >= 0}, event: {change: $parent.bydayHandler(value)}">
        <label data-bind="for: value"><b data-bind="text: $data.text"></b></label>
    </li>
</ul>

<b data-bind="text: ko.toJSON(byday())"></b>
​

JavaScript:

var viewModel = function(args) {
    var self = this;
    self.byday = ko.observableArray(args.byday);

    self.bydayOptions = [{
        text: "Monday",
        value: "Mon"
    }, {text: "Tuesday",
        value: "Tue"
    }, {text: "Wednesday",
        value: "Wed",
    }, {text: "Thursday",
        value: "Thu"
    }, {text: "Friday",
        value: "Fri"
    }, {text: "Saturday",
        value: "Sat"
    }, {text: "Sunday",
        value: "Sun"
    }];

    self.bydayHandler = function(d){
        console.debug(">>> inside the byday Handler");
        console.log(self.byday());
        if(d !== undefined){
            if(self.byday().indexOf(d) >= 0){
                self.byday().splice(self.byday().indexOf(d), 1);
            } else {
                self.byday().push(d);
            }
        }
    };
};

ko.applyBindings(new viewModel({byday: ["Mon"]}));

​

Answer 1

The knockout checked binding takes care of a lot of this for you. There's no need for an event handler.

Here's a updated fiddle: http://jsfiddle.net/daedalus28/pmMZW/