2011-10-06 22 views
6

backbone.jsビューの非常に基本的なチュートリアルに進んでいます。backbone.jsクリックイベントが発射されない

#sayhelloボタンをクリックすると、レンダリング機能が呼び出されます。 Renderは単純にjQueryのhtmlメソッドを使って "hello Bud Abbot"をelに入れます。

しかし、#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(); 

レンダリングメソッドが呼び出されますが、私はイベントでそれをやろうとすると、ダイスはありません。私が間違っていることを理解する助けがあれば、大歓迎です。

答えて

11

#sayhelloはビューの一部ではないためです。 #helloworld内#sayhello入れてみてください:あなたは、動的テンプレートを使用してページをレンダリングしている場合は、レンダリング機能でview.setElement(...)を呼び出して考える

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

woot!ありがとうございます – tim

+0

ありがとう!基本的で、私はまだそれを忘れる –

2

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

関連する問題