複数のビューを作成して複数のイベントを同じビューにバインドする

Question

私はbackbone.jsが新しく、ルート、ビューなどの仕組みを理解しようとしていますが、今は同じビューを構築するイベントに問題があります。私の言うことを正確に示すクリップがここにあります。私のバックボーンルータは、だから私はページが私は新しいページビューを作成するリンクをクリックしたときに

var Router = Backbone.Router.extend({ 

    routes: { 
     "pages": "pages", 
    } 
    pages: function() { 
     var page_view = new PageView(); 
    } 
}); 

のように見え、これは私が

PageView = Backbone.View.extend({ 
    el: $("#content"), 
    initialize: function() { 
     $.ajax({ 
      url: '/pages', 
      success: function (data) { 
       $("#content").html(data); 
      } 
     }); 
    }, 
    events: { 
     "click td input[type=checkbox]": "updatePublishedStatus" 
    }, 
    updatePublishedStatus: function (event) { 
     console.log('update publish status'); 
    } 
}); 

はかなり基本的な使用しているコードがどのようにhttp://screencast.com/t/QIGNpeT2OUWu

はこれがあります私は推測しますが、クリップに表示されるように/ページに移動するたびに、別のイベントがチェックボックスに登録されます。

Answer 1

var page_view = new PageView()をRouter.pages()の外側に移動します。

PageView.initialize()成功コールバックdataを変数に保存してください。 PageViewまたはモデル内。

を設定するPageViewにrender関数を追加します。

page_view.render()Router.pages()に電話してください。

Answer 2

ここで間違って行くいくつか、少しのための私と一緒に裸あります;）

1. は、あなたのビデオが収集ウェル、Pagesされたページを示します。 Pagesは、Page name、slug、publishedなどの属性を持つBackbone.Modelです。これが不足していると傷つきます。いくつかのhtmlを読み込んでDOMにプッシュするだけではなく、まず最初にバックボーンを使うという全目的に反します。
2. ページのモデルを作成すると、ビューが表示されます。その後、/ pagesルートにコレクションページなどのビューが表示されます。
3. pages.fetch();のページがPagesコレクションのインスタンスである場合は、ビューの初期化内ではなくデータを取得します。これは、ルータを初期化する前に起こる可能性があります。
4. ビューで属性を変更すると、個々のモデルが更新されます。

サイドポイントとして：初期化時にデータを取得することはあまり効果がありません。実際にデータを取得する前にrender（）を呼び出すことができます。これは楽しいことではありません。 $('#content')の代わりに、ビューの$ elを使用することもできます。 this.$el.html(...);のように