Adding/removing children

by etiennenoel

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p data-bind="foreach: children">    
    <input type="hidden" name="id" data-bind="value: $data.id" />
    <input type="text" name="firstName" data-bind="value: $data.firstName" />
    <input type="text" name="lastName" data-bind="value: $data.lastName" />
    <input type="date" name="dateOfBirth" data-bind="value: $data.dateOfBirth" />
    <!-- ko if: $data.id == 0 -->
    <button class="btn btn-danger" data-bind="click: $root.removeChild"><i class="icon-remove icon-white"></i></button>
    <!-- /ko -->
    <br />
</p>

<div id="json"></div>
<input type="hidden" id="childrenJSON" value='[{"id":0,"firstName":"a","lastName":"a","dateOfBirth":"1900-12-31"},{"id":10,"firstName":"b","lastName":"b","dateOfBirth":"2000-01-01"},{"id":0,"firstName":"c","lastName":"c","dateOfBirth":"2030-01-01"},{"id":0,"firstName":"c","lastName":"c","dateOfBirth":"1999-01-01"},{"id":0,"firstName":"c","lastName":"c","dateOfBirth":"1230-01-01"}]' />

<button class="btn btn-primary" id="addAChildButton" data-bind="click: addChild">Add a child</button>

<button class="btn" id="showJSON">Show JSON</button>

<script>
    $('#showJSON').click(function() {
        childrenModel = $.data(document.body, 'childrenModel')
        $('#json').html(ko.toJSON(childrenModel.children))
    });
</script>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

function Child(id, firstName, lastName, dateOfBirth) {
    var self = this;
    self.id = id;
    self.firstName = firstName
    self.lastName = lastName
    self.dateOfBirth = dateOfBirth
}

function childrenModel () {
    var self = this;
    self.children = ko.observableArray()
    
    // Operations
    self.addChild = function() {
        self.children.push(new Child(0, "c", "c", "0000-00-00"));
    }
    
    self.removeChild = function(child) { self.children.remove(child) }
}
var childrenModel = new childrenModel()
    
var a = $.parseJSON($('#childrenJSON').val())
for(i = 0; i < a.length; i++) {
    childrenModel.children.push(new Child(a[i].id, a[i].firstName, a[i].lastName, a[i].dateOfBirth));   
}

ko.applyBindings(childrenModel);
$.data(document.body, 'childrenModel', childrenModel);
//alert(ko.toJSON(childrenModel.children))