KnockoutJS - 数据绑定到字典集合答案

【问题标题】：KnockoutJS - Databind to a dictionary collectionKnockoutJS - 数据绑定到字典集合
【发布时间】：2011-11-16 01:19:42
【问题描述】：

如何使用 KnockoutJS 将字典集合绑定到选择列表。

如果我的“目的地”字典在 JSON 中如下所示：

{"Europe":"Europe incl Egypt, Turkey & Tunisia","ANZO":"Australia & New Zealand","WorldwideUSA":"Worldwide (incl USA & Canada)"}

如何将它绑定到选择列表。像这样的：

data_bind="value: Destination, options: Destinations.Value, optionsText: Destinations.Key"

【问题讨论】：

标签： knockout.js

【解决方案1】：

通常，在处理字典时，您会希望将其映射到包含具有键/值属性的对象的数组。

应该是这样的：

function mapDictionaryToArray(dictionary) {
    var result = [];
    for (var key in dictionary) {
        if (dictionary.hasOwnProperty(key)) {
            result.push({ key: key, value: dictionary[key] }); 
        }  
    }

    return result;
}

示例：http://jsfiddle.net/rniemeyer/7yDTJ/

【讨论】：

Ryan，我们如何从字典中预先选择一个值？在您的小提琴中，我为 selectedDestination 添加了值：ko.observable("ANZO") 并且第二项未预先选择。
这个例子有optionsValue: 'value'，所以它期望的是值而不是键。我更新了示例：jsfiddle.net/rniemeyer/7yDTJ
我会研究映射插件knockoutjs.com/documentation/plugins-mapping.html

【解决方案2】：

我知道这个问题已经得到解答，但我想我会分享一个更全面的解决方案。

https://github.com/jamesfoster/knockout.observableDictionary

这是一个演示它的 jsfiddle

http://jsfiddle.net/HLnGs/

希望其他人会觉得这很有用

【讨论】：

这真的很有用——我在我目前的大学项目中使用它并且效果很好。谢谢。

【解决方案3】：

如果您正在创建服务器 API，一个更简单的选择是将字典转换为服务器上的数组并返回该数组：

Dictionary<string, string> myDict = ... ;
return myDict.toArray();  // returns KeyValuePair<string, string>[]

现在您可以轻松地在淘汰赛中绑定数组...

<select class="form-control" 
  data-bind="options: opts, optionsText: 'Value', optionsValue: 'Key', optionsCaption: 'Show All', value: filter.myVal">
</select>

【讨论】：