0

我使用了淘汰教程中的一个例子来重现我的问题。我想不通的是如何设置项目中标签的值属性。我为 self.availableMeals 的每个条目添加了一个值，但是我尝试将其添加到它根本无法填充下拉列表。当我尝试将 optionsValue 添加到绑定时，它会填充下拉列表，但不会选择适当的值。请帮忙！

<h2>Your seat reservations</h2>

<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>
    </tr>     
    </tbody>
</table>


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

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

ko.applyBindings(new ReservationsViewModel());
4

1 回答 1

0

我想通了。我不知道为什么我不能向呈现的 HTML 添加 value 属性，但我不需要。我需要做的就是从模型中检索选定的项目，然后检查它。

<h2>Your seat reservations</h2>
<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: seats">
    <tr>
        <td><input data-bind="value: name" /></td>
        <!-- this line works but doesn't try to populate value attribute OF <OPTION> -->
        <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
        <!-- this line tries to populate value attribute with those commented out in the javascript but doesn't work -->
        <!--<td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName', optionsValue: 'val'"></select></td>-->
    </tr>     
    </tbody>
</table>
<button data-bind="click: showVal">Show Value</button>

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

// 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 = [
        { val: 0, mealName: "Standard (sandwich)" },
        { val: 1, mealName: "Premium (lobster)" },
        { val: 2, mealName: "Ultimate (whole zebra)" }
    ];    

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

    self.showVal = function() {
        alert(self.seats()[1].meal().val);
    }
}

ko.applyBindings(new ReservationsViewModel());

所以我可以得到（例如）其中一个 val 值self.seats()[1].meal().val

我希望这可以帮助其他有同样误解的人。

http://jsfiddle.net/bwbF3/5/

于 2013-08-14T10:08:23.987 回答