javascript - 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();

    }
});

在我更改代码中的 options.channel_id 后，点击处理程序被触发两次。我认为我的类id-to-pack中有两个 View 。如何删除相关元素中以前的 View ？

我尝试了 empty() 和 stopListening 没有任何效果。

Answer 1

我认为你需要 .remove() 从 DOM 中删除 View 及其 el，并调用 stopListening 来删除该 View 已监听的任何绑定(bind)事件。

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