1

致力于学习 bootstrap 和 knockout.js。这更像是一个淘汰赛的问题。

我想填充表的新行（使用 addSeat 函数），如果该新行上的名称字段为空，则将引导程序“错误”类添加到该行。默认为空。输入名称字段后，样式应更改为“成功”。

基本代码取自座位预订示例。这是标记：

    <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 类不会改变。

谢谢您的帮助！

4

1 回答 1

1

你有这条线的地方：

var ib = self.name.length;

你应该这样做：

var ib = self.name().length;

当我在 Chrome 中测试它时，这似乎工作得很好。这是jsFiddle：

http://jsfiddle.net/Xfv2g/

我唯一可以假设的是，您希望它会随着他们键入而改变。为了做到这一点，您必须name通过将valueUpdate: 'afterkeydown'修饰符放在值绑定来更改字段绑定的时间。

这是唯一的区别。

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

于 2013-04-13T22:41:17.883 回答