2011-10-06 24 views
6

Backbone.js görünümlerinde çok temel bir öğreticiyi gözden geçirin.backbone.js click olayı tetiklenmiyor

#sayhello düğmesine tıklandığında beklenen davranış render işlevini çağırmaktır. Render, elinizde "merhaba Bud Abbot" u koymak için jQuery'nin html yöntemini kullanır.

Ama #sayhello düğmesine tıkladığımda hiçbir şey olmuyor. Hata ya da bir şey yok. Firebug'da bir kesme noktası belirledim ve sadece render fonksiyonunu atladım. İşte

js var:

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; 

}); 

Ve burada html var: Buna

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

: Bunu değiştirdiğinizde garip görünüyor ne

<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> 

geçerli:

render yöntemi çağrılır, ancak bir olay ile yapmaya çalıştığımda - zar olmaz. Yanlış yaptığım şeyi anlamak için herhangi bir yardım büyük beğeni topluyor.

cevap

11

Çünkü #sayhello sizin görüşünüzün bir parçası değildir. #helloworld içeride #sayhello koyarak deneyin: dinamik şablonları kullanarak sayfanın oluşturulmasına, o zaman kılmak işlevinde view.setElement (...) çağırmadan düşünün

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

woot! teşekkürler – tim

+0

teşekkürler! temel ve hala unutuyorum –

2

;

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