Multiple click events in backbone.js

Question

var $ = jQuery = require('jquery'),
    Backbone = require('backbone'),
    Handlebars = require('handlebars'),
    _ = require('underscore'),
    Filter = require('../../libs/filters'),
    orderActionTemplate = require("../../templates/order/OrderAction.html"),
    orderListView = require('./OrderListView');

var OrderActionView = Backbone.View.extend({

    el: "#id-order-action",

    initialize: function (options) {
        var self = this;
        this.action = this.$el.find(".nav-pills li.active a").attr("action");
        if (options !== null && (typeof options !== 'undefined')) {

            self.channel_id = options.channel_id;
            self.channel_type = options.channel_type;
            this.getActions(self.channel_type, self.action); // By Default show to pack orders
            this.orderListView = new orderListView({
                action: self.action,
                channel_id: self.channel_id,
                el: ".id-to-pack"
            });
        } else {
            this.orderListView = new orderListView({
                action: self.action,
                el: ".id-to-pack"
            });

        }
        return this.orderListView;
    },

    events: {
        "click a.a-action": "getActiveTabActions"
    },

    getActiveTabActions: function (e) {
        var self = this;
        e.preventDefault();
        var liTab = $(e.currentTarget).attr("action");
        this.getActions(this.channel_type, liTab);
        console.log(self.channel_id);

        if (typeof self.channel_id !== 'undefined') {
            this.orderListView = new orderListView({
                action: liTab,
                channel_id: self.channel_id,
                channel_type: self.channel_type,
                el: ".id-to-pack"
            });
        }

    },

    getActions: function (channel_type, tab) {
        if (typeof channel_type === 'undefined') channel_type = "DEFAULT";

        if ((typeof tab !== 'undefined')) {
            var actions = Filter.actions[channel_type][tab]();
            this.$el.find("#" + tab + "-action").html(actions);
        }

    },

    render: function () {
        // this.$('.id-to-pack').empty().off();
        this.$el.html(orderActionTemplate);
        // this.orderListView.setElement(this.$('.id-to-pack')).delegateEvents().render();

    }
});

After I changed the options.channel_id in my code, the click handler is getting fired twice. I think there are two views in my class id-to-pack . How do I remove previous views in the concerned element?

I tried empty() and stopListening nothing worked.

Answer 1

I think you need .remove() Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

http://backbonejs.org/#View-remove