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

我想用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;

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

来源

2011-04-19 naivedeveloper

我希望我理解你的权利。

你有不同的工具的工具箱。当然，你必须以不同的方式处理不同工具的点击。

那么，你为什么不有附带的工具ID的工具箱视图中的所有点击事件。

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

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

来源

2011-04-20 14:47:36 thgie

另一种方式来处理这个问题。您已经捕获单个工具的点击并将其传递给toolclick函数。该函数知道被单击的模型，您可以将它传递给switch语句以创建单独的行为。

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

这样你就不必在渲染或模板中做一堆准备。

来源

2011-04-22 04:04:53 LeRoy

如果您的工具是相同的，但做的东西比其他工具不同，那么你就需要通过延长你的“香草”的工具来创建一个单独的工具。通过扩展，您可以添加新的属性和功能，也可以完全覆盖它们。

var ExtendedToolView = ToolView.extend({ 

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

});

来源

2011-07-22 17:47:41 rxgx

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

回答

相关问题