代码之家 › 专栏 › 技术社区 › AlexNikolaev94

鼠标点击事件切换类

backbone.js jquery javascript

AlexNikolaev94 · 技术社区 · 8 年前

我有一个 Backbone.View 在鼠标单击时呈现集合并对其进行过滤。我需要添加类 active 我点击的按钮,但问题是按钮是这个视图的一部分,每当我尝试 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);
     }
});

但正如我已经告诉过的,我需要的类被切换或添加了一会儿,然后视图被再次呈现,并被设置为默认类。有什么办法处理这个问题吗?

2 回复 | 直到 8 年前

Emile Bergeron Dhaval Rajpara 8 年前

我简化了渲染并添加了一些优化。

由于我们没有您的模板,我将其更改为启用优化:

<button id="active" type="button">Active</button>
<button id="passed" type="button">Passed</button>
<div class="list"></div>

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

其他信息:

Managing Views and Memory Leaks
Underscore's each (注意第三个参数)
尽量避免 callback hell ,使回调可重用(如 renderItem )

masif 8 年前

我已经编辑了片段,你可以试试这个吗。

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');
                 }
             }
        });

请注意:我使用了checkbox元素而不是button。