我使用了淘汰教程中的一个示例,其中包含了重现问题的基本要点。我无法弄清楚的是如何在项目中设置标签的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());
答案 0 :(得分:0)
我想出来了。我不知道为什么我不能为渲染的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());
所以我可以使用self.seats()[1].meal().val
我希望这可以帮助其他人有同样的误解。