Question

这是这个问题 KnockoutJS - Databind to a dictionary collection

我正在创建一个来自服务器的JSON下拉选项。但是在创建它之后的某个时刻我希望更新数据。我创造了一个小提琴 http://jsfiddle.net/LPrf3/

这显示了我目前所处的位置。我成功更新了select的可观察数组。但是......出于某种原因，您需要从下拉列表中单击选择以便刷新

使用Javascript：

$(function() {

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

var updatedDestinationsFromServer = {"Arctic":"Includes Polar bears and seals","Antarctic":"Just Penguins"};

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

    return result;
}

function  viewModel () {
    destinations= ko.observableArray(mapDictionaryToArray(destinationsFromServer));
    selectedDestination= ko.observable();
    updateDestinations = function()
    {
        destinations= ko.observableArray(mapDictionaryToArray(updatedDestinationsFromServer));
    };
};


ko.applyBindings(new viewModel());


});

HTML

<select data-bind="options: destinations, optionsText: 'key', optionsValue: 'value', value: selectedDestination"></select>

<hr />

<div data-bind="text: selectedDestination"></div>
<button data-bind="click:updateDestinations">UPDATE</button>

如何让select更新？

Answer 1

您正在重新destinations到新的observabelArray，而不是更新数组。见this fiddle。更新任何 observable时，请始终将新值作为参数传递，切勿使用=操作符分配新值。

错误的方式：

updateDestinations = function(){
    destinations=ko.observableArray(mapDictionaryToArray(updatedDestinationsFromServer));
};

正确的方式：

updateDestinations = function(){
    destinations(mapDictionaryToArray(updatedDestinationsFromServer));
};

KnockoutJS - 数据绑定到字典集合 - 更新

1 个答案: