3

同じデータの異なる並べ替えを含む監視可能な配列にバインドされた2つの選択リストがあります。これらの選択リスト値のバインドは両方とも同じ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個のアイテムがあり、選択の1つを変更すると遅延が発生します。

バリューバインディングを抑制しようとしましたが、違いは見られませんでした。

4

1 に答える 1

3

optionsバインディングを使用しながら、バインディングによって生成された多数のオプションを使用すると、パフォーマンスの問題が発生しますvalue。この問題は、 RyanNiemeyerによるこのブログ投稿で非常によく説明されています。彼はまた、この問題を回避するためのいくつかの方法を説明しています。

ただし、最も簡単な修正は、根本的なKnockoutバグを修正するFreedomプラグインを使用することかもしれません。Freedomプラグインが含まれている例を次に示します。http：//jsfiddle.net/mbest/sHatN/3/

于 2013-03-02T02:56:08.997 に答える