按鈕onclick事件和Backbone.js的查看

Question

我目前有以下內容的HTML文件：

<div class="button1"> 

    <button class="first" id="up" onclick="tranistionUp"> 
     Go Up 
    </button> 

    <button class="last" id="down" onclick="tranistionDown"> 
     Go Down 
    </button> 
</div> 

在Backbone.js的，我有以下視圖文件：

var BlahView = BackBone.View.extend({ 
    initialize:function(){}, 
    blah... 
    blah... 
transitionUp: function(){ 
    blah... 
}, 
tranistionDown: function(){ 
}, 
render:function(){ 
    blah.... 
}; 
}); 

當我點擊在按鈕上，我看到兩個函數都有一個未定義的函數錯誤，我是新來的主幹，任何幫助都很棒。

Answer 1

您應該在Backbone.View中設置您的事件處理程序。

HTML（添加id="myButtons"到容器div）

<div class="button1" id="myButtons"> 
    <button class="first" class="button-up">Go Up</button> 
    <button class="last" class="button-down">Go Down</button> 
</div> 

的JavaScript（加events）

var BlahView = Backbone.View.extend({ 

    events: { 
    "click .button-up": "transitionUp", 
    "click .button-down": "tranistionDown", 
    }, 

    transitionUp: function() { 
    console.log("Transition up"); 
    }, 

    tranistionDown: function() { 
    console.log("Transition down") 
    } 

}); 

var blahView = new BlahView({ el: $('#myButtons') }); 

通過指定onclick屬性，您的瀏覽器期待的功能在全球範圍內被稱爲transitionUp和transitionDown。你的方法是在一個對象中定義的。通常不鼓勵使用HTML屬性綁定事件處理程序，特別是如果您使用Backbone（因爲您無法輕鬆地將事件綁定到視圖的特定實例）。