在鼠标单击事件上切换类

本文介绍了在鼠标单击事件上切换类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个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)