2011-10-25 3 views
3

기본 backbone.js 예제를 설정하려고합니다. 실행되는 이벤트를 얻을 수 없습니다. 내가 뭘 놓치고 있니?backbone.js를 사용하는 이벤트

HTML

<html lang="en"> 
<head> 
    <script type="text/javascript" src="js/libs/jquery/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="js/libs/underscore/underscore-min.js"></script> 
    <script type="text/javascript" src="js/libs/backbone/backbone.js"></script> 
    <script type="text/javascript" src="js/test.js"></script> 

    <title></title> 
</head> 

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

그리고 여기가

(function($) { 

HelloWorldView = Backbone.View.extend({ 

    el : '#helloworld', 

    events: {'click #sayhello': 'onButtonClicked'}, 

    onButtonClicked: function() 
    { 
     console.log("buttonclicked"); 
    }, 

    render : function() { 
     console.log("rendering"); 
     $(this.el).html("Hello world"); 
    } 
}); 

var helloView = new HelloWorldView().render();})(jQuery); 

나는 이벤트가 발생 얻을 수없는 이유 어떤 생각 JS

입니까?

답변

3

귀하의 render 방법은 #sayhello 킬 :

render : function() { 
    console.log("rendering"); 
    $(this.el).html("Hello world"); // #sayhello is now gone 
} 

그래서 클릭하고 이벤트 처리기가 절대 호출되지됩니다 더 #sayhello이 없습니다.

아마도 당신의 render보다이 같은보고되어있다 :

render: function() { 
     console.log("rendering"); 
     $(this.el).find('button').html("Hello world"); 
} 

데모 : http://jsfiddle.net/ambiguous/4empG/

+0

그러나, 나는 여전히 onButtonClicked 이벤트를 캡처 할 수 없었습니다. –

+1

@Andrei : 데모 (http://jsfiddle.net/ambiguous/4empG/)는 어떻게 작동합니까? 데모에서 내가 한 유일한 변화는 내 답변 에서처럼 새로운'render'입니다. –

+0

이것은 JSFiddle에 내 로컬 코드를 붙여 넣을 때 이상합니다. 행운을 비네. HTML은 정확히 위와 같습니다 ... –

0

실제로 당신이 ("안녕하세요"
$ (this.el) .html 중에서로 전체 HTML을 대체 "Hello World");
더 나은 점은 버튼을 찾아 html로 변경하는 것입니다.
this. $ ('# sayhello') .html ('Hello World');

관련 문제