我有一个Backbone.View,它呈现一个集合并在单击鼠标时对其进行过滤.我需要在单击的按钮上添加类active,但是问题是按钮是该视图的一部分,每当我尝试使用addClass或toggleClass时,按钮都将再次使用默认类进行渲染.这是我的看法:
I've got a Backbone.View that renders a collection and filters it on mouse click. I need to add class active to the button that I click, but the problem is that buttons are the part of this view and whenever I try to addClass or toggleClass it just renders again with default class. Here's my view:
var ResumeList = Backbone.View.extend({ events: { 'click #active': 'showActive', 'click #passed': 'showPassed' }, initialize: function () { this.collection = new ResumeCollection(); }, render: function (filtered) { var self = this; var data; if (!filtered) { data = this.collection.toArray(); } else { data = filtered.toArray(); } this.$el.html(this.template({ collection: this.collection.toJSON() }); _.each(data, function (cv) { self.$el.append((new ResumeView({model: cv})).render().$el); }); return this; }, showActive: function () { this.$('#active').toggleClass('active'); // a function that returns a new filtered collection var filtered = this.collection.filterActive(); this.render(filtered); } });但是,正如我已经说过的那样,我需要的类仅被切换或添加了片刻,然后再次渲染视图并将其设置为默认类.有什么办法可以解决这个问题?
But as I've already told, the class I need is toggled or added just for a moment, then the view is rendered again and it is set to default class. Is there any way to handle this?
推荐答案我简化了渲染并添加了一些优化.
I simplified the rendering and added some optimizations.
由于我们没有您的模板,因此我将其更改为启用优化:
Since we don't have your template, I changed it to enable optimization:
<button id="active" type="button">Active</button> <button id="passed" type="button">Passed</button> <div class="list"></div>然后您的列表视图可能是这样的:
Then your list view could be like this:
var ResumeList = Backbone.View.extend({ events: { 'click #active': 'showActive', 'click #passed': 'showPassed' }, initialize: function() { this.childViews = []; this.collection = new ResumeCollection(); }, render: function() { this.$el.html(this.template()); // cache the jQuery element once this.elem = { $list: this.$('.list'), $active: this.$('#active'), $passed: this.$('#passed') }; this.renderList(); // default list rendering return this; }, renderList: function(collection) { this.elem.$list.empty(); this.removeChildren(); collection = collection || this.collection.models; // Underscore's 'each' has a argument for the context. _.each(collection, this.renderItem, this); }, renderItem: function(model) { var view = new ResumeView({ model: model }); this.childViews.push(view); this.elem.$list.append(view.render().el); }, showActive: function() { this.elem.$active.toggleClass('active'); var filtered = this.collection.filterActive(); this.renderList(filtered); }, /** * Gracefully call remove for each child view. * This is to avoid memory leaks with listeners. */ removeChildren: function() { var view; while ((view = this.childViews.pop())) { view.remove(); } }, });其他信息:
- 管理视图和内存泄漏
- 下划线的each (注意第三个参数)
- 尝试避免回调地狱,使回调可重用(例如renderItem)
- Managing Views and Memory Leaks
- Underscore's each (notice the third argument)
- Try to avoid callback hell, make the callbacks reusable (like renderItem)
更多推荐
在鼠标单击事件上切换类
发布评论