3

「ゲーム」と呼ばれる監視可能な配列にプッシュされた各アイテムでテンプレートが再レンダリングされるという問題があります。これは、配列を新しいカウントで更新するためにサブスクリプションを全員に送信する必要がある「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>
4

1 に答える 1

0

トムは、DOMの操作と、配列の更新ごとに作成する必要のあるリスト項目のN2個について正しいかもしれません。games少なくともできることは、次のgamesようなものでアレイの作成を最適化することです。

vm.gameCount = ko.computed(function () {
  var games = this.games().length,
    numbers = new Array(games);

  for (var i = 0; i < games; i++) {
    numbers[i] = i + 1;
  }

  return numbers;
}, vm);

作業中のjsFiddle

これはおそらく、ゲームの配列を維持し、計算時に必要な変更のみを行うほど効率的ではありませんが、読み取り可能です。

于 2012-07-07T18:38:03.793 に答える