This code has all the basics you need to know to read, add and update to single properties and properties inside nested data.
<html>
<head>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Knockout.js - Hello World - Basic Add and Update</title>
<script >
function Model(){
};
$(document).ready(function ()
$("#itemsButtonUpdate").click(function(){
$("#peopleButtonAdd").click(function(){
function Person(firstName,lastName) {
<body >
<body >
//basic bindable property - will update UI when greeting("foo") is called.
this.greeting = ko.observable("Hello World");
//bindable array
this.items = ko.observableArray(["lamp", "rug", "table"]);
//bindable array with bindable object properties
this.people = ko.observableArray([new Person("John","Smith"),new Person("Bob","Smith")]);
{
var model = new Model();
ko.applyBindings(model);
$("#greetingButton").click(function(){
model.greeting("Howdy!");
});
$("#itemsButtonAdd").click(function(){
//add a new string to the array
model.items.push("pen");
});
//replace the string of the first item in the array
model.items.replace(model.items()[0], "paper");
});
//add a new person object
model.people.push(new Person("Mark","Jones"));
});
$("#peopleButtonUpdate").click(function(){
//replace the first name of the first row
model.people()[0].firstName("Frank");
});
$("#peopleButtonReplace").click(function(){
//replace a whole person object with another
model.people.replace(model.people()[1], new Person("Peter","Man"));
});
});
this.firstName = ko.observable(firstName);
this.lastName = ko.observable(lastName);
}
</script>
</head>
<p data-bind="text: greeting"></p>
<p><button id="greetingButton">Update</button> </p>
<p> </p>
<table border="1" >
<thead><tr><th>Items</th></thead>
<tbody data-bind="foreach: items">
<tr >
<td data-bind="text: $data" ></td>
</tr>
</tbody>
</table>
<p><button id="itemsButtonAdd">Add</button> <button id="itemsButtonUpdate">Update</button></p>
<p> </p>
<table border="1" data-bind="with: people">
<thead><tr><th>First Name</th><th>Last Name</th></tr></thead>
<tbody data-bind="foreach: $data">
<tr >
<td data-bind="text: firstName" ></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
No comments:
Post a Comment