6

Marionette.js を使用するように Backbone.js アプリケーションをリファクタリングしていますCollectionView。

ItemViewモデルにいくつかの があるとしますCow:

// Declare my models.
var Cow = Backbone.Model.extend({});
var Cows = Backbone.Collection.extend({
  model: Cow
});

// Make my views
var GrassPatch = Marionette.ItemView.extend({
  tagName:  'div',
  template: "<section class='grass'>{{name}}</section>",
})

var Pasture = Marionette.CollectionView.extend({});

// Instantiate the CollectionView,
var blissLand = new Pasture({
  itemView: GrassPatch;
});

// Now, add models to the collection.
Cows.add({
  name: 'Bessie',
  hasSpots: true
});

Cows.add({
  name: 'Frank',
  hasSpots: false
});

ここにトリックがあります。牧草地に斑点のある牛だけが欲しい. hasSpotsCollectionView (Pasture) を定義する際に、 ===のモデルにのみ注意を払うように指示するにはどうすればよいtrueですか?

理想的には、すべてのイベントで CollectionView フィルターを使用したいと考えていますが、最小限、モデル プロパティに基づいて一部の ItemView のみをレンダリングするにはどうすればよいですか?

アップデート

私は David Sulc の例を使用しましたが、これは簡単な解決策になりました。実装例を次に示します。

  this.collection = Backbone.filterCollection(this.collection, function(criterion){
    var len = String(criterion).length;
    var a = criterion.toLowerCase();
    return function(model){
      var b = String(model.get('name')).substr(0, len).toLowerCase();
      if (a === b) {
        return model;
      }
    };
  });

  this.collection.add({ name: 'foo' });
  this.collection.add({ name: 'foosball' });
  this.collection.add({ name: 'foo bar' });
  this.collection.add({ name: 'goats' });
  this.collection.add({ name: 'cows' });

  this.collection.filter('foo');

  // -> returns the first three models
4

4 に答える 4

3

v2.4.1 では Marionette がこれを処理します。

CollectionView.filterメソッドを参照してください。

以下はドキュメントからのものです：

  var cv = new Marionette.CollectionView({
    childView: SomeChildView,
    emptyView: SomeEmptyView,
    collection: new Backbone.Collection([
      { value: 1 },
      { value: 2 },
      { value: 3 },
      { value: 4 }
    ]),

    // Only show views with even values
    filter: function (child, index, collection) {
      return child.get('value') % 2 === 0;
    }
  });

  // renders the views with values '2' and '4'
  cv.render();

  // change the filter
  cv.filter = function (child, index, collection) {
    return child.get('value') % 2 !== 0;
  };

  // renders the views with values '1' and '3'
  cv.render();

  // remove the filter
  // note that using `delete cv.filter` will cause the prototype's filter to be used
  // which may be undesirable
  cv.filter = null;

  // renders all views
  cv.render();
于 2015-03-20T07:28:32.407 に答える
0

一部のカスタム ロジックが原因でコレクションをフィルター処理できず、それらのモデルをコレクションに含めたいが、レンダリングしたくない場合があります。それを達成するには、次のことができます。 

var Pasture = Marionette.CollectionView.extend({
     addChild: function(child, ChildView, index) {
               if(child.get('hasSpots')) {
                    return Marionette.CollectionView.prototype.addChild.call(this, child, ChildView, index);
               }
     }});

コレクションのフィルタリングがこれを行うためのはるかに優れた方法であることには同意しますが。

于 2014-10-07T12:05:33.673 に答える
0

他の人が示唆しているように、これを達成するための最良の方法は、表示したいモデルのみを含むようにコレクションをフィルタリングし、そのフィルタリングされたコレクションを CollectionView に渡してレンダリングすることです。

ここで実際の例を見ることができます: http://davidsulc.github.io/marionette-gentle-introduction/#contacts右上の入力フィールドで連絡先をフィルターし、そのテキスト (例: "li") を含むモデルのみを表示します。

これは、フィルタリングを処理する特別なコレクション タイプを使用することで実現されます: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js

そして、ここでインスタンス化されます: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13

このコードは、マリオネットに関する私の本からのものです。

于 2013-09-04T06:38:54.550 に答える
0

コレクションをフィルタリングするという@Will Mの提案は、これを行う適切な方法です。

于 2013-09-04T06:32:45.217 に答える