javascript Knockout Js - 将 json 数组中的单个项目绑定到元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9104993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout Js - Binding a single item from a json array to an element
提问by Faris Zacina
I have the following view model which contains an array of elements
我有以下包含元素数组的视图模型
function ReservationsViewModel() {
var self = this;
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0, id = 1 },
{ mealName: "Premium (lobster)", price: 34.95, id = 2 },
{ mealName: "Ultimate (whole zebra)", price: 290, id = 3 }
];
}
I want to bind this view model to a input, but i want to bind only the Single array element meal name that has the id value as the data-id attribute of the input.
我想将此视图模型绑定到输入，但我只想绑定具有 id 值作为输入的 data-id 属性的单数组元素膳食名称。
<input type="text" id="firstElementMealName" data-id="1" data-bind="value: ??"></input>
In this example i would bind the array element with id = 1, and the text would appear as "Standard (Sandwich)", but i still need the full binding and change tracking (observables) and all the other good stuff in Knockout.
在这个例子中，我将绑定 id = 1 的数组元素，文本将显示为“标准（三明治）”，但我仍然需要完整的绑定和更改跟踪（可观察的）以及 Knockout 中的所有其他好东西。
How to pick up the data-id and use it in the binding code to bind the appropriate meal to the input?
如何获取data-id并在绑定代码中使用它来绑定合适的饭菜到输入？
Thanks in advance
提前致谢
回答by Andreas Helgegren
Suggested solution:
建议的解决方案：
function ReservationsViewModel() {
var self = this;
self.availableMeals = ko.observableArray([
{ mealName: "Standard (sandwich)", price: 0, id = 1 },
{ mealName: "Premium (lobster)", price: 34.95, id = 2 },
{ mealName: "Ultimate (whole zebra)", price: 290, id = 3 }
]);
self.getMealById = function(id) {
ko.utils.filterArray(self.availableMeals(), function(item) {
return item.id == id;
});
};
}
In the view:
在视图中：
<input type="text" id="firstElementMealName" data-bind="value: getMealById(1)"></input>
EDIT: here is a two-way solution:
编辑：这是一个双向的解决方案：
function ReservationsViewModel() {
var self = this;
self.availableMeals = ko.observable({
id_1: { mealName: "Standard (sandwich)", price: ko.observable(0) },
id_2: { mealName: "Premium (lobster)", price: ko.observable(34.95) },
id_3: { mealName: "Ultimate (whole zebra)", price: ko.observable(290) }
});
}
ko.applyBindings(new ReservationsViewModel());
In the View:
在视图中：
<input type="text" id="firstElementMealName" data-bind="value: availableMeals().id_2.price()"></input>
