javascript - 根据另一个 json 数组将 observableArray 映射到 Multiple SELECT

Question

3我使用 jquery $.getJSON 并使用此信息填充 SELECT 下拉列表(<OPTION> 的值是 ItemID ，文本是 DisplayName ):

//$.getJSON and populate <SELECT> options with this info
{"ItemOptions": [
 {"ItemID" : 1, "DisplayName": "Apples"},
 {"ItemID" : 2, "DisplayName": "Bananas"},
 {"ItemID" : 3, "DisplayName": "Oranges"},
 {"ItemID" : 4, "DisplayName": "Grapes"},
 {"ItemID" : 5, "DisplayName": "Carrots"},
 {"ItemID" : 6, "DisplayName": "Crushed Dreams"}
]}

稍后在代码中，我得到一个装运“ list ”，其中包含一些信息，其中包括已装运元素的列表，如下所示:

//manifest
{
    "LocationSource"    : "Dallas",
    "LocationDestination"   : "New York",
    "Items" : [
        {"ItemID" : 2},
        {"ItemID" : 3},
        {"ItemID" : 6}
    ],
    "Status" : "In Transit"
}
// then ko.mapping.toJS(manifest) and 
// ko.applyBindings(manifest) is done in javascript.

您会注意到 list 中的 Items 数组有 ItemID - 它与我填充 SELECT 的 ItemID 匹配。

我使用 Knockout 的映射插件 - 只需 ko.mapping.fromJS(manifest) - 效果很好。 INPUT 和 SPAN 以及我映射 LocationSource、Status 等的地方都做得很好。

我的问题是我希望 SELECT 是一个倍数，并代表我的 list 中的项目(能够添加/删除它们)。 HTML 如下:

<input data-bind="value: LocationSource"/>
<input data-bind="value: LocationDestination"/>
<select multiple="multiple" data-bind="value: Items"></select>   // this thing

或

<select multiple="multiple" data-bind="value: Items().ItemID"></select>

似乎不适合我，而且我似乎不知道如何让它正常工作(看来 ko.mapping 正在将 Items 设置为一个数组，但每当我在 SELECT 框中进行选择时，它都会爆炸(要么保持初始化时的状态，要么从函数更改为直接值，具体取决于我如何修改代码)。

本质上，我的问题是这样的:

我有一个“事物”列表。它们的 ID 与我的 list 中的 ko.mapped 数组相匹配(据说该属性是一个 .observableArray)。如何根据“事物”列表(ItemOptions)从 Items 添加或删除 - 这样，当我将 ko.map.toJS(manifest) 推回服务器时，我的 Items 数组仍然是代表我选择的 ItemID 的列表在选择中。

编辑:我考虑过将整个列表添加为 .AllItems 之类的内容到 list 中，就像它们在 Knockout examples (self.AvailableMeals) 中显示的那样，但这实际上不是我想要的——我也不想要整个列表当我 map.toJS 和 $.post 回来时，列表被推回服务器。

更新

self.AllItems = ItemOptions;                                    //doesn't need to change, dont obvserable it, right?
self.Items = ko.observableArray(model.Items);   

然后，在 HTML 中我有:

<select data-bind="options: AllItems,  optionsText: 'DisplayName', selectedOptions: Items" size="15" multiple="true"></select>

这让我非常接近。它按照我的预期操作 list - 现在唯一的问题是，当我第一次加载 list 并应用绑定(bind)时，SELECT 不会自动选择 list 中的项目。我怀疑这是因为 Items 数组条目和 ItemOptions 条目不相同？它们都有 ItemID，但其中一个有 DisplayName，而另一个则没有。

更新2

添加了一个jsfiddle:它将演示它的工作原理，但不选择初始加载:

http://jsfiddle.net/85Pvz/1

Answer 1

如果我正确理解你的问题，你想使用 selectedOptions binding ？

所以你会得到类似的东西:

 <select data-bind="options: ItemOptions, selectedOptions: (manifest.)Items, optionsText: 'name', optionsValue: 'id'" size="5" multiple="true"></select> 

对于你的JavaScript，类似:

ItemOptions = [
    {name: "opt1", id: 1},
    {name: "opt2", id: 2},
    {name: "opt3", id: 3},
    {name: "opt4", id: 4} 
]

jsFiddle example