我有两个绑定(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)进行限制,但似乎没有什么作用。
最佳答案
当使用 options
绑定(bind)生成的大量选项同时使用 value
绑定(bind)时,您将遇到性能问题。这个问题在this blog post中有很好的描述。作者:瑞安·尼迈耶。他还解释了解决此问题的多种方法。
不过,最简单的解决办法可能是使用我的 Freedom plugin修复了潜在的 knockout 错误。这是包含 Freedom 插件的示例:http://jsfiddle.net/mbest/sHatN/3/
关于knockout.js - 两个选择列表共享相同的值绑定(bind),更新速度慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15157449/