knockout.js如何綁定動態css

Question

正在學習引導和knockout.js。這更是一個淘汰賽問題。

我想填充一個表的新行（使用addSeat函數），並且如果該新行上的名稱字段爲空，請將引導'錯誤'類添加到該行。它默認爲空。一旦名稱字段被輸入，樣式應該變成'成功'。

基本代碼取自Seat Reservation樣本。下面是標記：

<div id="food" class="span10"> 
<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2> 

<table class="table table-condensed table-hover"> 
    <thead> 
    <tr> 
     <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th> 
    </tr></thead> 
    <tbody data-bind="foreach: seats"> 
     <tr data-bind="css: isnameBlank"> 
      <td><input data-bind="value: name" /></td> 
      <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td> 
      <td data-bind="text: formattedPrice"></td> 
      <td><a href="#" data-bind="click: $root.removeSeat"><i class="icon-remove"></i>Remove</a></td> 
     </tr>  
    </tbody> 
</table> 

<button data-bind="click: addSeat, enable: seats().length < 8">Reserve another seat</button> 

<h3 data-bind="visible: totalSurcharge() > 0"> 
    Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span> 
</h3> 
    </div> 

這裏是js文件：

// Class to represent a row in the seat reservations grid 
function SeatReservation(name, initialMeal) { 
    var self = this; 
    self.name = ko.observable(name); 
    self.meal = ko.observable(initialMeal); 

    self.formattedPrice = ko.computed(function() { 
     var price = self.meal().price; 
     return price ? "$" + price.toFixed(2) : "None"; 
    }); 

    self.isnameBlank = ko.computed(function() { 
     var ib = self.name().length; 
     console.log(ib); 
     return ib == 0 ? "warning" : "success"; 
    }, self); 

} 

// 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[0]) 
    ]); 

    // Computed data 
    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; 
    }); 

    // Operations 
    self.addSeat = function() { 
     self.seats.push(new SeatReservation("", self.availableMeals[0])); 
    } 
    self.removeSeat = function (seat) { self.seats.remove(seat) } 
} 

ko.applyBindings(new ReservationsViewModel(), document.getElementById('food')); 

當我運行這個控制檯登錄正確的長度（IB變量），但CSS類不會改變。

謝謝你的幫助！

Answer 1

如果你有這樣一行：

var ib = self.name.length; 

你應該這樣做：

var ib = self.name().length; 

這似乎是工作得很好，當我在Chrome測試。這裏是的jsfiddle：

http://jsfiddle.net/Xfv2g/

我可以承擔的唯一的事情是，你希望它改變對方輸入。爲了做到這一點，當name字段綁定時，必須將valueUpdate: 'afterkeydown'修飾符設置爲value binding。

這是與唯一的區別是相同的小提琴。

http://jsfiddle.net/Xfv2g/1/