如何处理相似但不同视图的点击事件？

Question

我正在尝试使用 Backbone.js 实现一个简单的工具栏。我有以下简单的主干代码：

var Toolbox = Backbone.View.extend({
    el: $("#toolbox ul"),

    initialize : function() {
        _.bindAll(this, "addOne");
        toolCollection.each(this.addOne);
    },

    addOne : function(tool) {
        var view = new ToolView({ model: tool });
        $(this.el).append(view.render().el);
    }
});

// Tool model and collections
var Tool = Backbone.Model.extend();

var toolCollection = new Backbone.Collection([
    new Tool({ 
        tool:   "toolName1"
    }),
    new Tool({ 
        tool:   "toolName2"
    })
]);

// The view of the individual tools
var ToolView = Backbone.View.extend({
    tagName: "li",
    template : _.template($("#tool-template").html()),

    events: {
        "click #toolbox ul li a": "toolClick"
    },

    initialize : function() {
        _.bindAll(this, "render", "toolClick");
        this.model.view = this;
    },

    render : function() {
        var mj = this.model.toJSON();
        $(this.el).html(this.template(mj));

        return this;
    },

    toolClick : function() {
        console.log("Tool clicked");
    }
});

var tb = new Toolbox;

因此，我有一个问题。显然我需要以不同的方式处理工具上的每次点击。 当我实例化视图时，我可以绑定特定的单击事件来处理该特定工具的单击吗？如果可以，我将在哪里编写单击事件？我什至不确定我是否在这里遗漏了一些东西，但是任何人都可以建议一种模式，告诉我如何拥有一组相关但不同的视图以及如何单独处理视图的点击？任何帮助将不胜感激。提前致谢。

Answer 1

我希望我理解正确。

您有一个包含不同工具的工具箱。当然，您必须以不同的方式处理不同工具的点击。

那么，为什么不在 ToolBox 视图中包含所有单击事件并将 ID 附加到工具上呢？

events: {
        "click #toolbox #zoom": "zoomClick",
        "click #toolbox #pen": "penClick",
        "click #toolbox #line": "lineClick"
}

您可以在 ToolBox render() 函数中创建工具。希望有帮助。

Answer 2

另一种方法来处理这个问题。您已经捕获了对各个工具的点击并将其传递给 toolclick 函数。该函数知道所单击的模型，您只需将其传递给 switch 语句即可创建单独的行为。

toolClick: function() {
    var toolname = this.model.get("tool");
    switch(toolname) {
        case "toolName1":
            //Do something;
            break;
        case "toolName2":
            //Do something else;
            break;
    }
}

这样您就不必在渲染或模板中进行大量准备工作。

Answer 3

如果您的工具与其他工具相同但执行的操作不同，那么您需要通过扩展“普通”工具来创建该单独的工具。通过扩展，您可以添加新的属性和函数，也可以完全覆盖它们。

var ExtendedToolView = ToolView.extend({

    toolClick: function() {
        console.log("Extended Tool clicked");
    }

});