3

我有两个选择列表绑定到包含相同数据的不同排序的可观察数组。这两个选择列表值绑定到同一个 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);

在这个小提琴中，一切似乎都运行良好并且反应迅速，但是，实际数组大约有 1000 个项目，并且在更改其中一个选择时会有延迟。

我试图限制值绑定，但似乎没有什么不同。

4

1 回答 1

3

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

不过，最简单的修复可能是使用我的Freedom 插件来修复底层的 Knockout 错误。这是包含 Freedom 插件的示例：http: //jsfiddle.net/mbest/sHatN/3/

于 2013-03-02T02:56:08.997 回答