knockout.js - 两个选择列表共享相同的值绑定(bind)，更新速度慢

Question

我有两个绑定(bind)到可观察数组的选择列表，其中包含相同数据的不同排序。这两个选择列表值绑定(bind)到同一个 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这一切似乎运行良好并且 react 很快，但是，实际数组有大约 1000 个项目，并且在更改其中一项选择时会出现延迟。

我尝试对值绑定(bind)进行限制，但似乎没有什么作用。

Answer 1

当使用 options 绑定(bind)生成的大量选项同时使用 value 绑定(bind)时，您将遇到性能问题。这个问题在this blog post中有很好的描述。作者:瑞安·尼迈耶。他还解释了解决此问题的多种方法。

不过，最简单的解决办法可能是使用我的 Freedom plugin修复了潜在的 knockout 错误。这是包含 Freedom 插件的示例:http://jsfiddle.net/mbest/sHatN/3/