Question

我有两个选择列表绑定到可观察数组，这些数组包含相同数据的不同排序。这两个选择列表值绑定都是相同的observableArray。

HTML

  <select id="countriesAZ" data-bind="value: selectedCountry, options: countriesAZ, optionsText: 'Name', optionsValue: 'Id',  optionsCaption: 'Countries a - z'"></select>

  <select id="countriesByDistance" data-bind="value: selectedCountry, options: countriesDist, optionsText: 'Name', optionsValue: 'Id',  optionsCaption: 'Countries by distance'"></select>

JS

var myVM = function() {
    var self = this;
    this.countriesAZ = ko.observableArray([{"Id":1,"Name":"Scotland"},{"Id":2,"Name":"England"},{"Id":3,"Name":"Wales"},{"Id":4,"Name":"N. Ireland"}]);
    this.countriesDist = ko.observableArray([{"Id":1,"Name":"Scotland"},{"Id":2,"Name":"England"},{"Id":3,"Name":"Wales"},{"Id":4,"Name":"N. Ireland"}]);
    this.selectedCountry = ko.observableArray();
}

window.viewModel = new myVM();
ko.applyBindings(viewModel);

在this fiddle中，它似乎运行良好并且反应迅速，但是，实际数组有大约1000个项目，并且在更改其中一个选项时会有延迟。

我试图在价值绑定上加油门，但似乎没有什么区别。

Answer 1

使用options绑定生成的大量选项同时使用value绑定时，您将遇到性能问题。 Ryan Niemeyer在this blog post中很好地描述了这个问题。他还解释了解决这个问题的多种方法。

最简单的解决方法可能是使用我的Freedom plugin修复底层的Knockout错误。以下是包含Freedom插件的示例：http://jsfiddle.net/mbest/sHatN/3/

两个选择列表共享相同的值绑定，更新缓慢

1 个答案: