如何處理類似但不同視圖的點擊事件？

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

如何處理類似但不同視圖的點擊事件？

回答

相關問題