Observable array

by Randy Crews

HTML

<ul data-bind="foreach: myObservableArray">
    <li> <span data-bind="text: $index"></span> <span data-bind="text: fieldlabel"></span></li>
</ul>
<hr/>
<ul data-bind="foreach: myCheckboxArray">
    <li><input type="checkbox" data-bind="checked: fieldlabel, click:addItem" />&nbsp;<label data-bind="text: fieldlabel"></label></li> 
</ul>
<hr/>
<div class="mylabel" data-bind="text: 'Observable array length:  ' +  myObservableArray().length"></div>
<div class="mylabel" data-bind="text:'Checkbox array length:  ' +  myCheckboxArray().length"></div>

CSS

.mylabel{
    margin-top:20px;
    margin-left:100px;
}

JavaScript

function AppViewModel(){
    var self = this;
self.myObservableArray = ko.observableArray([
    {fieldname : "Field1", fieldlabel: "Field Label 1", parent:"Arrest"},
    {fieldname : "Field2", fieldlabel: "Field Label 2", parent:"Arrest"},
    {fieldname : "Field3", fieldlabel: "Field Label 3", parent:"Arrest"},
    {fieldname : "Field4", fieldlabel: "Field Label 4", parent:"Arrest"}
    ]);

self.myCheckboxArray = ko.observableArray([
    {fieldname : "dateofbirth", fieldlabel: "Date of Birth", parent:"Person"},
    {fieldname : "age", fieldlabel: "Current Age", parent:"Person"},
    {fieldname : "race", fieldlabel: "Race", parent:"Person"}
    ]);
    
    addItem = function(){
        var item = this.fieldname();
        alert(item);
        return true;
    }

}  

ko.applyBindings(new AppViewModel());