Mapping sample

by graphicsxp

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
students are : <br/>
<ul data-bind="foreach: students">
    <li data-bind="text: name">
    </li>
</ul>
    
<br/>

<span>1. get the student list</span><br/>
<button data-bind="click: getStudents">get students</button><br/>

<span>2. select the first student in the list</span><br/>
<button data-bind="click: selectStudent">select student</button>



<br/><br/>

<div data-bind="with: selectedStudent">
<span>selected student is: </span><span data-bind="text: name"></span>


<ul data-bind="foreach: courses">
    <li data-bind="text: title"></li>
</ul>
<br/>

</div>


There are <span data-bind="text: students().length"></span> students in the array.

<div data-bind="text: ko.toJSON(viewModel)"></div>

CSS

input { margin: 2px; }
ul { margin-left: 10px; }

JavaScript

var originalData = {   
    students: null,
    selectedStudent:  null
};

var viewModel = ko.mapping.fromJS(originalData);
//viewModel.students = ko.observable(/*viewModel.children()[0]*/);
//viewModel.selectedChild = ko.observable(/*viewModel.children()[0]*/);


viewModel.getStudents = function(){
 viewModel.students([ { id: 2, name: "bob",  courses: [{id: 19, title: "sport"}, {id:20, title:"french"}] }, { id: 3, name: "ted" } ]);  
    
    alert(viewModel.students().length);
    
}

viewModel.selectStudent = function(){
 //var obj =  { id: 9, name: "new", courses: [{id: 19, title: "sport"}, {id:20, title:"french"}] };
//    viewModel.selectedChild.name("test");
    
   //alert(viewModel.children()[0].courses[0].title);
    
    viewModel.selectedStudent(viewModel.students()[0]);
    alert(viewModel.selectedStudent().name);
}

ko.applyBindings(viewModel);