Question

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

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;

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

Answer 1

我希望我理解你。

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

那么，为什么不在ToolBox视图中拥有所有点击事件，并在工具上附加ID。

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

您可以在ToolBox render（）函数中创建工具。希望有所帮助。

Answer 2

另一种处理此问题的方法。您已经捕获了单个工具上的单击并将其传递给工具单击功能。该函数知道单击的模型，您可以将其传递给switch语句以创建单独的行为。

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

通过这种方式，您无需在渲染或模板中进行大量准备工作。

Answer 3

如果您的工具相同但与其他工具不同，那么您需要通过扩展“vanilla”工具来创建单独的工具。使用扩展，您可以添加新的属性和功能，也可以完全覆盖它们。

var ExtendedToolView = ToolView.extend({

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

});

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

3 个答案: