Backbone.js使用单个视图呈现重置集合

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

(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);

（函数（$）{
变量图像=[
{标签：“乐趣”，日期：“2012年4月3日”，位置：“家”，标题：“与我的夫人玩得开心”}，
{标签：“Chillin”，日期：“2012年4月4日”，位置：'家'，说明：'和夫人在公园'，
{标签：“专业”，日期：“2012年4月5日”，位置：“家”，标题：“和夫人在婴儿床上”}，
{标签：“教育”，日期：“2012年4月6日”，地点：“家”，标题：“和我的孩子玩得开心”}，
{标签：“家”，日期：“2012年4月3日”，位置：“家”，标题：“和我的夫人玩得开心”}，
{标签：“专业”，日期：“2012年4月4日”，位置：“家”，说明：“与夫人在公园里”}，
{标签：“乐趣”，日期：“2012年4月5日”，位置：“家”，标题：“和我的夫人在婴儿床上”}，
{标签：“Chillin”，日期：“2012年4月6日”，位置：“家”，标题：“和我的孩子玩得开心”}，
{标签：“乐趣”，日期：“2012年4月3日”，位置：“家”，标题：“与我的夫人玩得开心”}，
{标签：“教育”，日期：“2012年4月4日”，地点：“家”，标题：“与夫人在公园里”}，
{标签：“个人”，日期：“2012年4月5日”，位置：“家”，标题：“与夫人一起在婴儿床上”}，
{标签：“个人”，日期：“2012年4月6日”，位置：“家”，标题：“有一个游戏日期”}
];
var Item=Backbone.Model.extend({
默认值：{
照片:'http://placehold.it/200x250'
}
});
var Album=Backbone.Collection.extend({
型号：项目
});
var ItemView=Backbone.View.extend({
el:$（“.content”），
初始化：函数（）{
this.collection=新专辑（图像）；
这个。render（）；
$（“#过滤器”）.append（this.createSelect（））；
this.on（“更改：filterType”，this.filterByType）；
this.collection.on（'reset'，this.render，this））；
},
模板：$（“#img_容器”）.text（），
render:function（）{
var tmpl=wu.template（this.template）；
_.每个（此.collection.models、函数（项）{
这个.el.append（tmpl（item.toJSON（））；
}，这个）；
},
活动：{
“更改过滤器选择”：“设置过滤器”
},
getTypes:function（）{
return uq.uniq（this.collection.pull（“tags”），false，函数（tags）{
return tags.toLowerCase（）；
});
},
createSelect:function（）{
var filter=this.$el.find（#filter”），
选择=$（“”{
html：“全部”
});
_.each（this.getTypes（），函数（项）{
变量选项=$（“”{
值：item.toLowerCase（），
文本：item.toLowerCase（）
}).appendTo（选择）；
});
返回选择；
},
设置过滤器：函数（e）{
this.filterType=e.currentTarget.value；
触发器（“更改：filterType”）；
},
filterByType:函数（）{
如果（this.filterType==“全部”）{
此。收集。重置（图像）；
}否则{
this.collection.reset（图像，{silent:true}）；
var filterType=this.filterType，
filtered=uu.filter（this.collection.models，函数（项）{
return item.get（“tags”）.toLowerCase（）==filterType；
});   
此.collection.reset（已过滤）；
}
}
}); 
var i=新项目视图（）；
})（jQuery）；

在没有看到标记的情况下，有点难以确定，但我怀疑您的选择需要位于同一个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);
   }

---

在没有看到标记的情况下，有点难以确定，但我怀疑您的select需要位于同一个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);
   }

---

成功了！谢谢！我也会试试你的建议。因此，使用我看到的主视图会带来更多好处。又来了！如果答案解决了你的问题，那么你可能会考虑通过在左边的勾勾勾选来接受它。谢谢！我也会试试你的建议。因此，使用我看到的主视图会带来更多好处。又来了！如果答案解决了你的问题那么