1. Jason

2. Using foreach without a container
element
The <!-- ko --> and <!-- /ko --> comments act as start/end
markers, defining a “virtual element” that contains the
markup inside
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>

3. Example
var viewModel = {
tr:[
{text:"text1", value:"value1"},
{text:"text2", value:"value2"},
{text:"text3", value:"value3"}
]
}; <table>
<!-- ko foreach: tr -->
<tr>
<td data-bind="text:text"></td>
<td data-bind="text:value"></td>
</tr>
<!-- /ko -->
</table>
Uncaught Error: Cannot find closing comment tag to match: ko foreach: tr

4. Example
Output ：
<table>
<!-- ko foreach: tr -->
<tbody>
<tr>
<td data-bind="text:text"></td>
<td data-bind="text:value"></td>
</tr>
<!-- /ko -->
</tbody>
</table>

5. Example
<table>
<tbody>
<!-- ko foreach: tr -->
<tr>
<td data-bind="text:text"></td>
<td data-bind="text:value"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<table>
<tbody data-bind=“foreach: tr”>
<tr>
<td data-bind="text:text"></td>
<td data-bind="text:value"></td>
</tr>
</tbody>
</table>

6. The "event" binding
<div>
<div data-bind="event: {
mouseover: enableDetails,
mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>

7. The "event" binding
<ul data-bind="foreach: places">
<li data-bind="text: $data, event:
{ mouseover: $parent.logMouseOver }">
</li>
</ul>
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London',
'Paris', 'Tokyo']);
self.logMouseOver = function(place) {
console.log(place);
}
}

8. The "event" binding
Accessing the event object, or passing more parameters
<div data-bind="event:
{ mouseover: myFunction }">
Mouse over me
</div>
var viewModel = {
myFunction: function(data, event)
{
……
}
};

9. The "event" binding
Accessing the event object, or passing more parameters
<div data-bind="event:
{ mouseover:
function(data, event) {
myFunction('param1', 'param2', data, event)
}
}">
Mouse over me
</div>

10. The "event" binding
Accessing the event object, or passing more parameters
<button data-bind="event:
{ mouseover:
myFunction.bind($data, 'param1', 'param2')
}">
Click me
</button>

11. The "event" binding
Allowing the default action
<a href="http://XXXX.html" data-bind="event:
{ click: myFunction }">Click me</a>
var viewModel = {
myFunction: function(data, event) {
console.log(data);
return false;
}
};

12. The "event" binding
Preventing the event from bubbling
<div data-bind="event: { mouseover: myDivHandler }">
<button data-bind="event:
{ mouseover: myButtonHandler },
mouseoverBubble: false">
Click me
</button>
</div>

13. Converting View Model Data to Plain JSON
function MyViewModel() {
var self = this;
self.firstName = ko.observable("Bert");
self.lastName = ko.observable("Bertington");
self.fullName = ko.computed(function()
{ return self.firstName() + “, “ +
self.lastName();
});
}
var vm = new MyViewModel();
alert(JSON.stringify(vm));

14. Converting View Model Data to Plain JSON
 ko.toJS
var plainJs = ko.toJS(vm);
 ko.toJSON
var jsonData = ko.toJS(vm);
plainJs = {
firstName: "Bert",
lastName: "Bertington",
fullName: "Bert, Bertington"
}
jsonData = ‘{"firstName":"Bert","lastName":"Bertington",
"fullName":"Bert, Bertington"}’;

15. Reference
 Introduction Knockoutjs
http://knockoutjs.com/documentation/introduction.html