0

私はKnockoutjs.comの@ 2番目のチュートリアル「リストとコレクションの操作」を見ていました：http://learn.knockoutjs.com/#/?tutorial=collections

HTML は次のとおりです。

座席指定 ()

<table>
<thead><tr>
    <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<!-- Todo: Generate table body -->
<tbody data-bind="foreach: seats">
    <tr>
        <td> <input data-bind="value: name()"/></td>
        <td> <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
        <td data-bind="text: formatterPrice"></td>
        <!--<td> <a href="#" data-bind="click: $root.removeSeat">Remove</a></td>-->
        <td> <button data-bind="click: $root.removeSeat">Remove</button></td>
    </tr>
</tbody>
</table>

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

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

<span data-bind="text: seats()[0].name()" ></span> <br/>
<span data-bind="text: seats()[0].meal().mealName" />

ビューモデルは次のとおりです。

// 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.formatterPrice = ko.computed(function() {
    var price = self.meal().price;
    return price ? "$" + price.toFixed(2) : "None";
});
}

// 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.958989 },
    { mealName: "Ultimate (whole zebra)", price: 290.00000 }
];    

// Editable data
self.seats = ko.observableArray([
    new SeatReservation("Steve", self.availableMeals[0]),
    new SeatReservation("Bert", self.availableMeals[1])
]);

self.addSeat = function() {
    self.seats.push(new SeatReservation("Steve", self.availableMeals[2]))
};

self.removeSeat = function(seat) {
    self.seats.remove(seat);
}

self.totalSurcharge = ko.computed(function() {
    var total = 0;

    for(var i = 0; i < self.seats().length; i++) {
        total += self.seats()[i].meal().price;
    }

    // alert(total);
    return total;
});    
}

ko.applyBindings(new ReservationsViewModel());

テキスト ボックスの「名前」を変更しようとすると、observableArray (座席) が変更されないようです。最初の行のテキストボックスを変更しようとすると、スパン@ボトムに「スティーブ」と表示されます。

name() を食事と同じように観察可能にしました。食事 (ドロップダウン) を変更すると、observableArray (座席) が機能しているように見えます。

助けてください！

4

1 に答える 1

0

で

<td> <input data-bind="value: name()"/></td>

使用する <td> <input data-bind="value: name"/></td>

そして<span data-bind="text: seats()[0].name()" ></span> <br/>あなたが望む<span data-bind="text: seats()[0].name" ></span> <br/>

于 2013-02-01T18:19:33.243 に答える