一、基礎(chǔ)部分lastName

單次綁定

從ViewModel綁定至UI這一層只進行一次綁定，不追蹤數(shù)據(jù)在任何一方的

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>

雙向綁定

輸入框中值發(fā)生改變時，標簽中顯示內(nèi)容相應(yīng)發(fā)生改變

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的顯示也相應(yīng)改變

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>   

綁定數(shù)組

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());

哪位大神這玩意怎么編寫代碼 我能說這是一個一個敲出來的嗎？ ?實在是累啊 ?求好心人告知