0

我正在尝试使用使用重置属性的选择框从单个视图呈现过滤后的集合。第一个问题是选择框和渲染的内容必须都出现在同一个 div 中才能工作。这是正常的吗？第二个问题是，它仅显示过滤后的结果，而是将过滤后的集合附加到呈现内容的末尾而不是替换它。我知道在我的 ._each 函数中附加将不起作用，因为它只会将过滤后的项目附加到整个集合的结尾。下面是我的代码示例：

(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作为根元素事件委托。

至于为什么你的集合只是被附加而不是替换它，我没有看到你在任何地方清空当前内容，你应该在你的渲染方法的开头有一些类似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 回答