骨干.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();

    }
});

在代碼中更改options.channel_id之后，點擊處理程序將被觸發兩次。 我認為我的班級id-to-pack有兩個視圖。 如何刪除相關元素中的先前視圖？

我試過empty()和stopListening沒有任何作用。

Answer 1

我認為您需要.remove（） 從DOM中刪除視圖及其el，並調用stopListening來刪除視圖具有listenTo'd的所有綁定事件。

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