クリックイベントが発射されない

私はしばらく見回してきましたが、これが原因であることを示唆するものは何も見つかりませんでした。クリックイベントが発射されない

マイコード：

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(); 
    } 
});

上記のコードは<body>の最後の項目として含まれています。 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でオーバーライド removeメソッド内 detachいじり試みることができるが、周りの faqViewのインスタンスを持ってする必要は本当にありません

常に：必要なときに作成し、必要がないときは削除します。

出典

2012-05-09 21:02:17

' events'属性はinitializeにのみ適用されますか？知っておいてよかった。助けてくれてありがとうございました。ちょうどbackbone.jsを見始めて、好きです。 – Nalum

@Nalum：['delegateEvents']（http://documentcloud.github.com/backbone/#View-delegateEvents）は自動的に呼び出されますが、あなた自身で呼び出すことができます。バックボーンのソースはかなり分かりやすいので、事を明確にするのを見るのを恐れないでください。 –

クリックイベントが発射されない

答えて

関連する問題