2011-10-06 168 views
6

閱讀backbone.js視圖的基礎教程。backbone.js點擊事件未觸發

預期的行爲是在單擊#sayhello按鈕時調用渲染功能。渲染只需使用jQuery的html方法在el中放置「hello Bud Abbot」。

但是,當我點擊#sayhello按鈕,什麼也沒有發生。沒有錯誤或任何東西。我在firebug中設置了一個斷點,並且只是跳過了渲染函數。

這裏的JS:

App = (function($){ 
jQueryView = Backbone.View.extend({ 
    initialize: function(){ 
     this.el = $(this.el); 
    } 
}); 

HelloWorldView = jQueryView.extend({ 
    el: $('#helloworld'), 
    events:{ 'click #sayhello': 'render' 
    }, 
    initialize: function(params){ 
     jQueryView.prototype.initialize.call(this); 
     this.name = params.name; 
    }, 

    render: function(){ 
     console.log("rendering"); 
     this.el.html("hello " + this.name); 
    } 
}); 

var self = {}; 
self.start = function(){ 
    new HelloWorldView({name: 'Bud Abbot'}); 
}; 
return self; 

}); 

而這裏的HTML:

<div id="helloworld"></div> 
<button id="sayhello">Say Hello</button> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> 
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 

似乎什麼奇怪的是,當我改變這樣的:

new HelloWorldView({name: 'Bud Abbot'}); 

這樣:

new HelloWorldView({name: 'Bud Abbot'}).render(); 

render方法被調用,但是當我試圖用一個事件來做 - 沒有骰子。任何幫助瞭解我做錯了什麼是非常感謝。

回答

11

這是因爲#sayhello不屬於您的觀點。嘗試把#sayhello內#helloworld:

<div id="helloworld"> 
    <button id="sayhello">Say Hello</button> 
</div> 
+0

woot!謝謝 – tim

+0

謝謝!基本,我仍然忘記它 –

2

如果你使用模板動態渲染頁面,然後在渲染功能考慮調用view.setElement(...);

this.setElement($('#login-container'));