2011-10-06 3 views
6

backbone.js보기에 대한 매우 기본적인 자습서를 진행합니다.backbone.js 클릭 이벤트가 발생하지 않음

예상되는 동작은 #sayhello 버튼을 클릭 할 때 렌더링 함수를 호출하는 것입니다. Render는 단순히 jQuery의 html 메서드를 사용하여 "hello Bud Abbot"을 엘에 넣습니다.

하지만 #sayhello 버튼을 클릭해도 아무런 변화가 없습니다. 오류 또는 아무것도. 난 방화 광섬유에 브레이크 포인트를 설정하고 그냥 렌더링 기능을 건너 뛰는 것을 지켜보십시오. 여기

은 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의이에

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

:이 변경할 때 이상한 것 같다 무엇

<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'}).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')));

관련 문제