Front End Starter(2)knockout - Introduction and List
Front End Starter(2)knockout - Introduction and List
Follow the Doc Here
http://learn.knockoutjs.com/#/?tutorial=intro
1. Knockout - Introduction
Model-View-ViewModel (MVVM)
Binding the Value
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Sillycat";
this.lastName = "Carl";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Column Editable and Observable
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
function AppViewModel() {
this.firstName = ko.observable("Sillycat");
this.lastName = ko.observable("Carl");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Computed the Value
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
function AppViewModel() {
this.firstName = ko.observable("Carl");
this.lastName = ko.observable("Luo");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new AppViewModel());
Binding the Button Function
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<button data-bind="click: capitalizeLastName">Go caps</button>
function AppViewModel() {
this.firstName = ko.observable("Carl");
this.lastName = ko.observable("Luo");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
ko.applyBindings(new AppViewModel());
2. Knockout - Lists and Collections
Think in the JavaScript Way
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[1]),
new SeatReservation("Sillycat", self.availableMeals[2])
]);
}
ko.applyBindings(new ReservationsViewModel());
<h2>Your seat reservations</h2>
<table>
<thead>
<tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr>
</thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
Adding Items
<button data-bind="click: addSeat">Reserve another seat</button>
function ReservationsViewModel() {
var self = this;
…snip…
self.addSeat = function() {
self.seats.push(new SeatReservation("Kiko", self.availableMeals[0]));
}
}
Making the data editable
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
Formatting the Price
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: formattedPrice"></td>
</tr>
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
self.formattedPrice = ko.computed(function(){
var price = self.meal().price;
return price ? "$" + price.toFixed(2) : "None";
});
}
I really love this JS tool.
Remove Items
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
<td data-bind="text: formattedPrice"></td>
<td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
</tr>
function ReservationsViewModel() {
var self = this;
…snip...
self.removeSeat = function(seat) {
self.seats.remove(seat)
}
}
Displaying a Total Surcharge
self.totalSurcharge = ko.computed(function() {
var total = 0;
for (var i = 0; i < self.seats().length; i++) {
total += self.seats()[i].meal().price;
}
return total;
});
<h3 data-bind="visible: totalSurcharge() > 0">
Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
Some Control of the Data Binding Column
<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
References:
http://knockoutjs.com/
http://www.cnblogs.com/tomxu/archive/2011/11/21/2257154.html