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