백본 이벤트는이 코드가

Question

핸들 바의 템플릿으로 발생하지 않습니다

PageView.js을

var PageView = Backbone.View.extend({ 
    events: { 
     'click .unpublish': 'unpublish' 
    }, 

    tagName: 'tr', 
    className: 'pageedit', 

    template: Handlebars.compile(PageViewTemplate), 

    render: function() { 
     this.$el.html(this.template(this.model)); 
     return this; 
    }, 

    unpublish: function() { 
     alert('hi'); 
    } 
}); 

PagesView.js

PagesView = Backbone.View.extend({ 

    tagName: 'tbody', 

    initialize: function() { 
     this.collection.on('reset', this.render, this); 
     this.render(); 
    }, 

    template: Handlebars.compile(PagesTemplate), 

    render: function() { 
     var countPages = this.collection.at(0).get('count'); 

     _.each(this.collection.at(0).get('pages'), function(model) { 
       pageView = new PageView({ model: model }); 
       this.$el.append(pageView.render().el); 
     }, this); 

     $('.main').html(this.template({ pages: this.$el.html() })); 

     this.delegateEvents(this.events); 

     return this; 
    }, 
}); 

Page.hbs

<td class="pageId"> 
    {{ id }} 
</td> 
<td class="pagename"> 
    <a href="/pages/{{ alias }}">{{ pagename }}</a> 
</td> 
<td class="catname">{{ catname }}</td> 
<td class="author">{{ author }}</td> 
<td>{{ date }}</td> 
<td> 
    {{#if status}} 
     <a href="#" class="unpublish"> 
      <img src='../{{ siteURL }}assets/img/admin/published.png'> 
     </a> 
    {{else}} 
     <a href="#" class="publish"> 
      <img src='../{{ siteURL }}assets/img/admin/not-published.png'> 
     </a> 
    {{/if}} 
</td> 
<td> 
    <a href="#" class="intrash"> 
     <img src='../{{ siteURL }}assets/img/admin/delete.png'> 
    </a> 
</td> 

Pages.hbs

<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Catalog</th> 
      <th>Author</th> 
      <th>Date</th> 
      <th>Status</th> 
      <th>Intrash</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{{pages}}} 
    </tbody> 
</table> 

는 router.js의 모든 인스턴스를 만들기 : 나는 .unpublish 링크를 클릭하면 페이지 뷰에서

var pages = new Pages(); 
pages.fetch().done(function() { 
    new PagesView({ collection: pages}); 
}); 

이벤트가 발생하지 않습니다. 모든 뷰는 좋은 렌더링하지만 :( 를 작동하지 않는 이벤트가 도와 드릴 날

Answer 1

나는 당신의 문제는 바로 여기에 생각 :

$('.main').html(this.template({ pages: this.$el.html() })); 

을하는 즉시 this.$el.html()을 말하는 것처럼, 당신이 당신의 이벤트를 잃었습니다. 백본은 delegate (또는 그에 해당하는 on)을 이벤트 처리를 위해보기의 el에 바인드하여 이벤트 처리가 DOM 노드 객체에 바인딩되도록합니다 .을 말하면 모든 것을 문자열로 변환하고 해당 문자열을 DOM에 저장합니다. 이벤트는 문자열이 아닌 DOM 요소 객체에 바인딩됩니다. 결과적으로 모든 것이 올바르게 표시됩니다. b 유엔 사건은 일어나지 않는다.

<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Catalog</th> 
      <th>Author</th> 
      <th>Date</th> 
      <th>Status</th> 
      <th>Intrash</th> 
     </tr> 
    </thead> 
</table> 

을 그리고 당신은 페이지에 모든 것을 얻기 위해 이런 일을 수행해야합니다 :

당신의 Pages.hbs 더 같이해야

// Add the basic <table> HTML. 
$('.main').html(this.template()); 
// Append the <tbody> DOM node which has event handling attached to it. 
$('.main').find('table.table').append(this.$el);