Knockoutjs.com - Hello World Example
http://knockoutjs.com/examples/helloWorld.html
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div id="navigationMenu" data-bind="html: get_Menu()"></div>
CSS
body {
font-family: arial;
font-size: 14px;
}
.liveExample {
padding: 1em;
background-color: #EEEEDD;
border: 1px solid #CCC;
max-width: 655px;
}
.liveExample input {
font-family: Arial;
}
.liveExample b {
font-weight: bold;
}
.liveExample p {
margin-top: 0.9em;
margin-bottom: 0.9em;
}
.liveExample select[multiple] {
width: 100%;
height: 8em;
}
.liveExample h2 {
margin-top: 0.4em;
font-weight: bold;
font-size: 1.2em;
}
.blue{
color:red;
}
}
JavaScript
var menuInnerHtml = "";
var GlobalNavMenuViewModel = {
get_Menu: function () {
for (var i = 0; i < 10; i++) {
if (i % 2 == 0) {
var obj = $('<li />',{'class':'blue'}).html('peekaboo');
menuInnerHtml+=obj.prop('outerHTML');
}
}
return menuInnerHtml;
}
}
// Bind Html
ko.applyBindings(GlobalNavMenuViewModel);