Javascript 在鼠标单击事件上切换类
我有一个Javascript 在鼠标单击事件上切换类,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我有一个主干。视图,它呈现一个集合并在鼠标点击时过滤它。我需要将classactive添加到我单击的按钮,但问题是按钮是此视图的一部分,每当我尝试addClass或toggleClass时,它都会使用默认类再次渲染。以下是我的看法: var ResumeList = Backbone.View.extend({ events: { 'click #active': 'showActive', 'click #passed': 'showPassed'
主干。视图
,它呈现一个集合并在鼠标点击时过滤它。我需要将classactive
添加到我单击的按钮,但问题是按钮是此视图的一部分,每当我尝试addClass
或toggleClass
时,它都会使用默认类再次渲染。以下是我的看法:
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);
}
});
但正如我已经说过的,我需要的类被切换或添加了一会儿,然后视图被再次渲染,并被设置为默认类。有什么办法处理这个问题吗?我已经编辑了这个片段,你能试试吗
var ResumeList = Backbone.View.extend({
events: {
'click #active': 'filterActive',
'click #passed': 'showPassed'
},
toggleElement: undefined,
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;
},
filterActive: function (evt) {
this.toggleElement = this.$el.find(evt.currentTarget);
// a function that returns a new filtered collection
var filtered = this.collection.filterActive();
this.render(filtered);
this.toggleActive();
},
toggleActive: function() {
if(this.toggleElement.is(':checked')) {
this.$el.find('#active').addClass('active');
} else {
this.$el.find('#active').removeClass('active');
}
}
});
请注意:我选择了复选框元素而不是按钮 我简化了渲染并添加了一些优化 由于我们没有您的模板,我将其更改为启用优化:
<button id="active" type="button">Active</button>
<button id="passed" type="button">Passed</button>
<div class="list"></div>
其他信息:
- (注意第三个论点)
- 尽量避免,使回调可重用(如
)renderItem
toggleElement
是不必要的,因为这一点。$el.find(“#active”)
是硬编码的,使得toggleActive
使用jQuery的方式过于复杂。
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();
}
},
});