JSFiddle - React, Tailwind, and code Playground

by mathewvance

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<p>issue: subscribing to child observable events<br />
- 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.
</p>

<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 (editing this should cause message box)</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>

<div class="editor-row">
    <button data-bind="click: submit">Debug</button>
</div>

<div class="editor-row">
    <label>Debug</label>
    <textarea id="debug" style="width:30em;height:5em">debug</textarea>
</div>

CSS

.editor-row
{
    clear: right;
    padding: 1em;
}

.editor-row label 
{
    display: block;
    clear: right;
}

JavaScript

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.childObject = ko.observable(new ChildModel(true, false));
    this.childObjects = ko.observableArray([ new ChildModel(true, false) ]);
    
    this.submit = function () {
        $('#debug').text(ko.toJSON(self));
    };
};

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

$(function () {
    $(".date-picker").datepicker({ dateFormat: "dd, M yy", numberOfMonths: 2 });
});