「ゲーム」と呼ばれる監視可能な配列にプッシュされた各アイテムでテンプレートが再レンダリングされるという問題があります。これは、配列を新しいカウントで更新するためにサブスクリプションを全員に送信する必要がある「gamesCount」と呼ばれる計算されたオブザーバブルが原因です。コードから「gamesCount」を削除すると、全体が高速に実行されます。この配列を「gamesCount」と共有する 128 のドロップダウンがあり、「ゲーム」の数を更新する必要があります。これでパフォーマンスを改善するにはどうすればよいですか?
app.viewModel.members.bracket = {
games: ko.observableArray([
{ left: ko.observable(50), top: ko.observable(50), height: ko.observable(96), width: ko.observable(150), reverse: false, type: 1, awayTeam: { display: ko.observable('') }, homeTeam: { display: ko.observable('')} },
{ left: ko.observable(50), top: ko.observable(150), height: ko.observable(96), width: ko.observable(150), reverse: false, type: 1, awayTeam: { display: ko.observable('') }, homeTeam: { display: ko.observable('')} },
{ left: ko.observable(50), top: ko.observable(250), height: ko.observable(96), width: ko.observable(150), reverse: false, type: 1, awayTeam: { display: ko.observable('') }, homeTeam: { display: ko.observable('')} },
{ left: ko.observable(800), top: ko.observable(232), height: ko.observable(426), width: ko.observable(150), reverse: true, type: 1, awayTeam: { display: ko.observable('') }, homeTeam: { display: ko.observable('')} }
]),
};
app.viewModel.members.bracket.gameCount = ko.computed(function () {
var games = this.games().length;
var numbers = [];
for (var i = 0; i < games; i++) {
numbers.push(i + 1);
}
return numbers;
}, app.viewModel.members.bracket);
<div data-bind="foreach: members.bracket.games">
@Html.DropDownList("GameNumber", new SelectList(Enumerable.Empty<string>()), new { @class = "select-bracket", data_bind = "options: $root.members.bracket.gameCount, dropdownlist: {}, optionsCaption:' - Game - '" })
</div>