0

リセットプロパティを使用した選択ボックスを使用して、単一のビューからフィルター処理されたコレクションをレンダリングしようとしています。最初の問題は、選択ボックスとレンダリングされたコンテンツが機能するためにすべて同じdivに表示される必要があることです。これは正常ですか？2番目の問題は、フィルタリングされた結果のみを表示する代わりに、フィルタリングされたコレクションを置換するのではなく、レンダリングされたコンテンツの最後に追加することです。._each関数のappendは、フィルタリングされたアイテムのみを追加するため、機能しないことを知っています。コレクション全体の終わり。以下に私のコードサンプルを示します。

(function($) {

  var images = [
       { tags: "Fun", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'},
       { tags: "Chillin", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'},
       { tags: "Professional", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'},
       { tags: "Education", date : "April 6, 2012", location : 'Home', caption : 'Having fun with my baby'},
       { tags: "Home", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'},
       { tags: "Professional", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'},
       { tags: "Fun", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'},
       { tags: "Chillin", date : "April 6, 2012", location : 'Home', caption : 'Having fun with my baby'},
       { tags: "Fun", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'},
       { tags: "Education", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'},
       { tags: "Personal", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'},
       { tags: "Personal", date : "April 6, 2012", location : 'Home', caption : 'Having a play date'}
    ];


var Item = Backbone.Model.extend({
    defaults : {
        photo : 'http://placehold.it/200x250'
    }
});

var Album = Backbone.Collection.extend({
    model : Item
});

var ItemView = Backbone.View.extend({
el : $('.content'),

   initialize : function() {
        this.collection = new Album(images);
        this.render();
        $('#filter').append(this.createSelect());
        this.on("change:filterType", this.filterByType);
        this.collection.on('reset', this.render, this);
    },
    template : $('#img_container').text(),
    render : function() {
        var tmpl = _.template(this.template);
        _.each(this.collection.models, function (item) {
           this.$el.append(tmpl(item.toJSON()));                   
        },this);
},

events: {
    "change #filter select" : "setFilter"
},

 getTypes: function () {
    return _.uniq(this.collection.pluck("tags"), false, function (tags) {
        return tags.toLowerCase();
        });
},

createSelect: function () {
    var filter = this.$el.find("#filter"),
        select = $("<select/>", {
            html: "<option>All</option>"
        });

    _.each(this.getTypes(), function (item) {
        var option = $("<option/>", {
            value: item.toLowerCase(),
            text: item.toLowerCase()
        }).appendTo(select);
    });
    return select;
},

setFilter: function (e) {
   this.filterType = e.currentTarget.value;
   this.trigger("change:filterType");
},

filterByType: function () {
    if (this.filterType === "all") {
        this.collection.reset(images);
    } else {
        this.collection.reset(images, { silent: true });
        var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
            return item.get("tags").toLowerCase() === filterType;   
        });   
       this.collection.reset(filtered);
    }
}

}); 

var i = new ItemView();


})(jQuery);
4

1 に答える 1

3

マークアップが表示されない場合、はっきりと言うのは少し難しいですが、選択が同じdivにある必要がある理由は、イベントハッシュを使用してバックボーンでイベントをバインドするときに、elをルート要素として使用するためだと思います。イベントの委任。

コレクションが置き換えられるのではなく追加されるだけである理由については、現在のコンテンツがどこにも空になっていないようです。renderメソッドの最初に。の行に沿って何かを含める必要がありますthis.$el('.itemCnt').empty()。

別のポイントとして、各アイテムのビューとそれらをキャッシュするオブジェクトを用意することを検討してください。コレクションをリセットする代わりに、フィルターが変更されるたびに、すべてのアイテムを切り離して、マークアップを再生成せずにフィルター処理された要素を再アタッチできます。

たとえば、

var ItemView = Backbone.View.extend({
   el : $('.content'),
   _views: {},
   //...

   add: function(item) {
     var view = new ItemView({model: item});
     this._views[item.cid] = view;
   }

   render: function (filteredItems) {
      this.$el.find('.ItemCnt .item').detach();

    var frag = document.createDocumentFragment();

      _.each(filteredItems, function(item) {
        frag.appendChild(this._views[item.cid].el);
     }
       this.$el.find('.ItemCnt').append(frag);
   }
于 2012-05-17T15:36:49.627 に答える