Установка атрибутов выпадающего значения с помощью knockout.js

Question

Я использовал пример из учебника нокаута, урезанного до сути, чтобы воспроизвести мою проблему. Я не могу понять, как установить атрибут value тегов в элементах. Я добавил значение для каждой записи 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()); 

Answer 1

Я понял это. Я не знаю, почему я не мог добавить атрибут value в отображаемый HTML, но мне не нужно было. Все, что мне нужно сделать, это получить выбранный элемент из модели, а затем изучить это.

<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/