1

ビューのすべてのチェックボックスをチェックするために、このコードを使用しています。

var checked = self.includeAllInSoundscript();
var contents = self.filterContents(self.getFilters());
for (var i = 0; i < contents.length; i++) {
   contents[i].includeInSoundscript(checked);
}
return true;

チェックボックス

<input type="checkbox" data-bind="checked: includeInSoundscript" title="sometitle" />

内容はこうです。

(function (ko) {
ContentViewModel = function (data) {
    this.orderId = data.orderId;
    this.contentReferenceId = ko.observable(data.contentReferenceId);
    this.includeInSoundscript = ko.observable();
});

これはフィルタ メソッドです。

self.getFilters = function() {
  var filterOrders = $.grep(self.orders(), function (order) {
    return (order.usedInfilter());
  });
  var filterLocations = $.grep(self.locations(), function (location)      {
    return (location.usedInfilter());
  });
  return { orders: filterOrders, locations: filterLocations };
};
self.filterContents = function (filter) {
  var filteredArray = self.contents();
  if (filter.orders.length > 0) {
      filteredArray = $.grep(filteredArray, function (content) {
        return $.grep(filter.orders, function (order) {
          return (order.orderId == content.orderId);
        }).length > 0;
      });
  }
  if (filter.locations.length > 0) {
      filteredArray = $.grep(filteredArray, function (content) {
                         return $.grep(filter.locations, function (location) {
                           return $.inArray(location.location, content.orderedFrom().split('/')) != -1;
  }).length > 0;
});
}
 return filteredArray;
};

すべてのチェックボックスをオンにするのは高速ですが、オフにすると最大 20 秒かかる場合があります。奇妙なことに、フィルタリングされた結果が小さい場合、フィルタリングされた結果が合計 1000 セットから約 40 であっても、まだ少し時間がかかります。

チェックボックスはテーブル内にあり、data-bind="foreach: contents" を使用してバインドされています

「不要な」オブザーバブルの一部を削除しました。変更されない可能性が最も高いプロパティについては、動作がわずかに改善されますが、特に Firefox では非常に遅くなります。大きな問題は、なぜこの動作がチェックボックスのチェックを外したときだけで、フィルタリング、並べ替え、チェックなどでは行われないのかということです.

注意：基本的に「チェック済み」がfalseの場合はチェックボックスのチェックを外すだけで、それ以外の場合は高速です。

編集:一度に 50 個のアイテムしか表示していませんが、フィルターされたすべてのアイテムをチェック/チェック解除しています。これにより、サーバーに投稿する内容を制御できます。

4

2 に答える 2

4

これは、私がこのシナリオで使用するものです。多分それはあなたを助けるでしょう。

バインドはchecked、選択した項目の配列で機能しますが、配列への文字列の格納のみをサポートします。配列へのオブジェクトの格納をサポートするカスタム バインディングを使用します (同様selectedOptionsに):

ko.bindingHandlers.checkedInArray = {
    init: function (element, valueAccessor) {
        ko.utils.registerEventHandler(element, "click", function() {
            var options = ko.utils.unwrapObservable(valueAccessor()),
                array = options.array, // don't unwrap array because we want to update the observable array itself
                value = ko.utils.unwrapObservable(options.value),
                checked = element.checked;
            ko.utils.addOrRemoveItem(array, value, checked);
        });
    },
    update: function (element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()),
            array = ko.utils.unwrapObservable(options.array),
            value = ko.utils.unwrapObservable(options.value);

        element.checked = ko.utils.arrayIndexOf(array, value) >= 0;
    }
};

各チェックボックスのバインディングは次のようになります。

<input type="checkbox" data-bind="checkedInArray: { array: $parent.selectedItems, value: $data }" />

すべてのアイテムを選択するためのチェックボックスは、通常のcheckedバインディングを使用し、書き込み可能な計算オブザーバブルにアタッチされます。

this.allItemsSelected = ko.computed({
    read: function() {
        return this.selectedItems().length === this.items().length;
    },
    write: function(value) {
        this.selectedItems(value ? this.items.slice(0) : [] );
    },
    owner: this
});

例: http://jsfiddle.net/mbest/L3LeD/

更新: Knockout 3.0.0checkedValueでは、上記のカスタム バインディングを不要にするバインディング オプションが導入されました。次のようにチェックボックスをバインドできます。

<input type="checkbox" data-bind="checked: $parent.selectedItems, checkedValue: $data" />

例: http://jsfiddle.net/mbest/RLLX6/

于 2013-02-13T21:56:18.977 に答える
0

jQuery を使用してすべてのボックスをチェック/チェック解除すると、パフォーマンスはどうなりますか?

$('#tableId').find('input[type=checkbox]').prop('checked', checked);

または、一度にすべてのボックスをチェックするのではなく、表示するときにすべてのボックスにチェックを入れていただけますか?

また、knockout.utilsメソッドを使用して監視可能な配列をフィルタリングすることもできます。パフォーマンスに違いがあるかどうかを確認したいと思います。

var filteredArray = ko.utils.arrayFilter(this.items(), function(item) {
        return ko.utils.stringStartsWith(item.name().toLowerCase(), filter);
    });

配列をループして各要素を処理する方法もあります。

ko.utils.arrayForEach(this.items(), function(item) {
    var value = parseFloat(item.priceWithTax());
    if (!isNaN(value)) {
        total += value;
    }
});

繰り返しますが、これがパフォーマンスに役立つかどうかはわかりませんが、かわいらしさに関しては少し良いと思います!

于 2013-02-13T11:46:25.880 に答える