knockout小记

一、基础部分lastName

单次绑定

从ViewModel绑定至UI这一层只进行一次绑定，不追踪数据在任何一方的

function AppViewModel() {    this.firstName = "Bert";    this.lastName = "Bertington";}
ko.applyBindings(new AppViewModel());
<p>First name:<stong data-bind="text:firstName"></strong></p>
<p>Last name:<stong data-bind="text:lastName"></strong></p>

双向绑定

输入框中值发生改变时，标签中显示内容相应发生改变

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());
<p>First name:<strong data-bind="text: firstName"></strong></p>
<p>Last name:<strong data-bind="text: lastName"></strong></p>
<p>First name:<input date-bind="value: firstName"></p>
<p>Last name: <input date-bind="value: lastName"></p>

依赖绑定

fullName依赖于firstName和lastName，改变firstName和lastName任意值，fullName的显示也相应改变

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
  this.fullName = ko.computed(function() {  
    return this.firstName() + " " + this.lastName();
  }, this);
}
ko.applyBindings(new AppViewModel());
<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>
<p>Full name: <strong data-bind="text: fullName"><strong></p>   

绑定数组

seats对象绑定了一个集合对象，在html view中，通过foreach指令渲染视图

<h2>Your seat reservations</h2>
<table>
  <thead>
    <tr>
      <th>Passenger name</th>
      <th>MealSurcharge</th>
      <th>Surcharge</th>
    </tr>
  </thead>
  <tbody>
   <tr>
     <td data-bond="text: name"></td>
     <td data-bind="meal().mealNmae"></td>
     <td data-bind="text:meal().price"></td>
   </tr>  
  </tbody>
</table>


function SeatReservation(name, initialMeal) {
   var self = this;
   self.name = name;
   self.meal = ko.observable(initialMeal);
}  

function ReservationsViewModel() {
   var self = this;
   self.availableMeals = [ 
     { mealName: "Standard (sandwich)", price: 0 },
     { mealName: "Premium (lobster)", price: 34.95 },
     { mealName: "Ultimate (whole zebra)", price: 290 }
   ];
   self.seats = ko.observableArray([
     new SeatReservation("Steve", self.availableMeals[1]),
     new SeatReservation("Bert", self.availableMeals[2])
   ]);
 }
ko.applyBindings(new ReservationsViewModel());

哪位大神这玩意怎么编写代码 我能说这是一个一个敲出来的吗？  实在是累啊  求好心人告知