클릭 이벤트가 발생하지 않습니다.

저는 잠시 둘러 보았습니다. 그 원인을 알려주는 것을 찾지 못했습니다.클릭 이벤트가 발생하지 않습니다.

내 코드 : 위의 코드가 <body>의 마지막 항목으로 포함되어

var faqView = Backbone.View.extend({ 
    tagName: 'div', 
    id: 'faq-list', 
    initialize: function() { 
     var view = this; 
     this.collection = new faqCollection(); 
     this.collection.fetch({ 
      success: function(collection, response) { 
       collection.each(function(faq){ 
        view.$el.append(_.template($('script#faq_item').html(),{faq: faq.attributes})); 
       }); 
      }, 
      error: function(collection, response) { 
       view.$el.html("<p>Unable to get the FAQ items.<br>Please try again later.</p>"); 
      } 
     }); 
    }, 
    render: function() { 
     this.$el.appendTo('div#container'); 

     return this; 
    }, 
    events: { 
     'click h3': 'toggleAnswer' 
    }, 
    toggleAnswer: function(event) { 
     console.log(this); 
     console.log(event); 
    } 
}); 

var router = Backbone.Router.extend({ 
    routes: { 
     "faq": "faq", 
     "*other": "defaultRoute" 
    }, 
    faqView: {}, 
    initialize: function() { 
     this.faqView = new faqView(); 
    }, 
    defaultRoute: function() { 
     this.resetPage(); 
    }, 
    faq: function() { 
     this.resetPage(); 
     $('body').addClass('page-faq'); 
     this.faqView.render(); 
    }, 
    resetPage: function() { 
     $('body').removeClass('page-faq'); 
     this.faqView.remove(); 
    } 
});

. HTML은 다음과 같습니다.

<body> 
    <div id="container"> 
    </div> 
    <script type="text/template" id="faq_item"> 
     <h3 class="contracted"><span>{{faq.question}}</span></h3> 
     <p style="display: none;">{{faq.answer}}</p> 
    </script> 
    <script type="text/javascript" src="./js/models.js"></script> 
    <script type="text/javascript" src="./js/views.js"></script> 
    <script type="text/javascript" src="./js/collection.js"></script> 
    <script type="text/javascript" src="./js/router.js"></script> 
    <script type="text/javascript"> 
     //<![CDATA[ 
      $(function() { 
       var app = new router; 
       Backbone.history.start(); 
      }); 
     //]]> 
    </script> 
</body>

모든 필수 요소가 존재 (지금까지 내가 말할 수있는) 내가 수동으로보기의 el 속성을 설정하고 있지 않다. <h3> 클릭했을 때 이벤트가 바인딩/실행되지 않는 이유는 무엇입니까?

편집 라우터를 사용하지 않고 자체 기능으로보기를 만들면 오류가 발생하지 않고 기능이 작동합니다. 예 :

var app = new faqView(); 
app.render();

출처

2012-05-09 Nalum

목록이 올바르게 보이나요? 오류가 있습니까? –

너무 많은 코드가 있습니다. 문제를 재현하는 가장 작은 코드 예제를 찾기 위해 노력해야한다고 생각합니다. 예를 들어이 라우터 코드가 모두 필요하다고 생각하지 않거나이 모든 것이 복잡성을 초기화합니다. – fguillen

@Niclas Sahlin : 생성 된 목록이 정확합니다. – Nalum

라우터에 문제가 있습니다. 바로 여기 사실 :

resetPage: function() { 
    $('body').removeClass('page-faq'); 
    this.faqView.remove(); 
}

View#remove은 jQuery's remove 뷰의 el 기본적으로 그 켜져 :

는

[...] 방법은 DOM에서 요소를합니다. [...] 요소와 관련된 모든 바인딩 이벤트 및 jQuery를 데이터 그래서 당신은 this.faqView.remove(), 뷰의 이벤트를 구동 delegate 핸들러가 없어 일단

을 제거한다.

일반적인 방법은보기를 만들고 나중에 캐싱하는 대신 필요에 따라보기를 만들고 파괴하는 것입니다. 라우터는 더 다음과 같아야합니다

var router = Backbone.Router.extend({ 
    routes: { 
     "faq": "faq", 
     "*other": "defaultRoute" 
    }, 
    defaultRoute: function() { 
     this.resetPage(); 
    }, 
    faq: function() { 
     this.resetPage(); 
     $('body').addClass('page-faq'); 
     this.view = new faqView(); 
     this.view.render(); 
    }, 
    resetPage: function() { 
     $('body').removeClass('page-faq'); 
     if(this.view) 
      this.view.remove(); 
    } 
});

데모 : http://jsfiddle.net/ambiguous/aDtDT/

당신은뿐만 아니라 faqView에서 오버라이드 (override) remove 방법 내부 detach로 장난을 시도 할 수 있지만, 주변 faqView의 인스턴스를 가질 필요가 정말 없다

항상 : 필요할 때 그것을 만들고 그것을 사용하지 않을 때 제거하십시오.

출처

2012-05-09 21:02:17

'events' 속성은 초기화시에만 적용됩니까? 알아 둘만한. 도움을 주셔서 감사합니다. 그냥 백본을보고 시작했습니다 .js와 그것을 좋아합니다. – Nalum

@Nalum : ['delegateEvents'] (http://documentcloud.github.com/backbone/#View-delegateEvents) 바인딩을 수행하면 자동으로 호출되지만 직접 호출 할 수 있습니다. Backbone 소스는 이해하기가 쉽기 때문에이를 보면서 두려워하지 마십시오. –

클릭 이벤트가 발생하지 않습니다.

답변

관련 문제