backbone.js : 왜 이벤트가 두 번째로 발사되지 않습니까?

Question

저는 JavaScript와 Backbone의 상대적으로 새로운 기능입니다. 나는 간단하고 초보자 수준의 백본 앱을 해킹하고 있습니다. 나는 두 가지 의견을 가지고있다 : 집과 newentry. 집에서 "새 항목"을 클릭하여 NewEntry를 렌더링합니다. Newentry에서 "취소"를 클릭하여 집으로 렌더링합니다. 그래서, "취소"및 "새 항목"을 각각 클릭하여 집과 newentry간에 전환하고 싶습니다.

그러나 작동하지 않습니다. 이것은 내가하려고하는 것입니다 :

1. 가정에서 "새 항목"을 클릭하십시오. NewEntry는 적절하게 렌더링됩니다.
2. newentry의 "취소"를 클릭하십시오. 홈은 적절하게 렌더링됩니다.
3. 가정에서 "새 항목"을 클릭하십시오. NewEntry는 다시 올바르게 렌더링됩니다.
4. newentry의 "취소"를 클릭하십시오. 집이 렌더링되지 않습니다. 클릭 이벤트와 관련된 메소드가 두 번째로 발사되지 않습니다.

   매우 튼튼합니다! 왜 그런지 알아낼 수 없습니다. 다른 이벤트가 발사되는지 여부를 알아 내고 싶습니다. 그러나 나는 어떻게 모른다. 누구나 내가해야 할 일을 알고 있니?

   자바 스크립트 :

   var Views = {
       Home: Backbone.View.extend({
           template: $('#homeview-template').template(),
           initialize: function() {
               this.entries = new Collections.Entries();
               this.entries.on('all', this.render, this);
               this.entries.fetch();
           },
           render: function() {
               var currDate = getCurrentDate();
               var innerHtml = $.tmpl(this.template, {
                   currDate: currDate
               });
               this.$el.html(innerHtml);
               return this;
           }
       }),
   
       NewEntry: Backbone.View.extend({
           template: $('#newentryview-template').template(),
           events: {
               'click button#cancel-new-entry': 'cancelNewEntry',
               'all': 'logEvents'
           },
           initialize: function() {
               // currently, do nothing
           },
           render: function() {
               var innerHtml = $.tmpl(this.template);
               this.$el.html(innerHtml)
               return this;
           },
           cancelNewEntry: function() {
               console.log("test 1");
               window.router.showHome();
           },
           logEvents: function(evnt) {
               console.log("works");
               console.log("event", evnt);
           }
       })
   };
   
   var Router = Backbone.Router.extend({
       initialize: function(inputs) {
           this.homeView = new Views.Home();
           this.newEntryView = new Views.NewEntry();
           this.el = inputs.el
       },
   
       routes: {
           "": 'showHome',
           "#": 'showHome',
           'new': 'writeNewEntry'
       },
       showHome: function() {
           this.el.empty();
           this.navigate("");
           this.el.append(this.homeView.render().el);
       },
       writeNewEntry: function() {
           this.el.empty();
           this.navigate('new');
           this.el.append(this.newEntryView.render().el);
       }
   });
   

   .

   html :

   
       <script id='homeview-template' type='text/template'>
       <h1 class='title'>My Journal</h1>
       <div id='curr-date-new-entry'>
           <div id='curr-date'>${currDate}</div>
           <div id='new-entry'>
               <a href='#/new'>New Entry</a>
           </div>
       </div>
       </script>
       <script id='newentryview-template' type='text/template'>
       <h1 class='title'>New Entry</h1>
       <input id='new-entry-title' placeholder='New entry title' type='text'/>
       <input id='new-entry-body' placeholder='New entry content' type='text'/>
       <button id='submit-new-entry'>Submit</button>
       <button id='cancel-new-entry'>Cancel</button>
       </script>
       

Answer 1

이 문제를 해결할 수 있습니다.

writeNewEntry: function() {
    this.el.empty();
    this.navigate('new');
    this.el.append(this.newEntryView.render().el);
    //fix: http://backbonejs.org/#View-delegateEvents
    this.newEntryView.delegateEvents();
}

.

그러나보기를 재사용하지 않는 경우 초기화 대신 WriteNewEntry 메소드에서 뷰를 직접 인스턴스화하는 것이 좋습니다.이 방법으로 수동으로 delegateEvents를 호출 할 필요가 없습니다.

writeNewEntry: function() {
    this.el.empty();
    this.navigate('new');
    this.newEntryView = new Views.NewEntry();
    this.el.append(this.newEntryView.render().el);
}

.