Question

Looking for a good example of how to set up child models in knockoutjs. This includes binding to child events such as property updates which I haven’t been able to get working yet.

Also, it would be better to bind to a single child in this case instead of an array but I don’t know how to set it up in the html without the foreach template.

http://jsfiddle.net/mathewvance/mfYNq/

Thanks.

<div class="editor-row">
    <label>Price</label>
    <input name="Price" data-bind="value: price"/>
</div>

 <div class="editor-row">
    <label>Child</label>
    <div data-bind="foreach: childObjects"> 
        <div><input type="checkbox" data-bind="checked: yearRound" /> Year Round</div>
        <div><input type="checkbox" data-bind="checked: fromNow" /> From Now</div>
        <div>
            <input data-bind="value: startDate" class="date-picker"/> to 
            <input data-bind="value: endDate" class="date-picker"/>
        </div>
    </div>
</div>

var ChildModel= function (yearRound, fromNow, startDate, endDate) {
    var self = this;

    this.yearRound = ko.observable(yearRound);
    this.fromNow = ko.observable(fromNow);
    this.startDate = ko.observable(startDate);
    this.endDate = ko.observable(endDate);

    this.yearRound.subscribe = function (val) {
        alert('message from child model property subscribe\n\nwhy does this only happen once?');

        //if(val){
        //    self.startDate('undefined');
        //    self.endDate('undefined');
        //}
    };
}

var ParentModel = function () {
    var self = this;

    this.price = ko.observable(1.99);
    this.childObjects = ko.observableArray([ new ChildModel(true, false) ]);
};

var viewModel = new ParentModel ();
ko.applyBindings(viewModel);

Answer 1

Try it with the following:

this.yearRound.subscribe(function (val) {
        alert('value change');
    });

If you want to have the subscriber also being called while loading the page do something like this:

var ChildModel= function (yearRound, fromNow, startDate, endDate) {
    var self = this;

    this.yearRound = ko.observable();
    this.fromNow = ko.observable(fromNow);
    this.startDate = ko.observable(startDate);
    this.endDate = ko.observable(endDate);

    this.yearRound.subscribe(function (val) {
        alert('value change');
    });
    this.yearRound(yearRound);
}

http://jsfiddle.net/azQxx/1/ – this works for me with Chrome 16 and Firefox 10

Every time the checked button changes its value the callback fires.

The observableArray is fine in my opinion if you may have more than one child model associated to the parent.