KnockoutJS - 数据绑定到字典集合

Question

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

如果我的"Destinations"字典在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"

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

Answer 2

我知道这已经得到了回答,但我想我会分享一个更全面的解决方案.

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

这是一个演示它的jsfiddle

http://jsfiddle.net/HLnGs/

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

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