バックボーン複合モデルを使用したアンダースコアテンプレートエンジンによるHTMLテーブルのレンダリング

Question

アンダースコアテンプレートエンジンを使用してHTMLテーブルをレンダリングしようとしています。まず、私は私が好ましく、Childrenプロパティを通じてCurrentModelと反復からのデータの一部を印刷ところ私が探しているHTMLの結果はかなりこのようなものです。この

{ 
    CurrentModel: { 
     Heading: "Home", 
     Id: "pages/193", 
     Metadata: { 
      Name: "Home", 
      Title: null, 
      Keywords: null, 
      Description: null, 
      DisplayInMenu: true, 
      Published: "/Date(1334499539404)/", 
      Changed: "/Date(1334499539404)/", 
      ChangedBy: "Marcus", 
      IsPublished: true, 
      IsDeleted: false, 
      Slug: null, 
      Url: null, 
      SortOrder: 0 
     }, 
     Parent: null, 
     Children: [ 
      "pages/226", 
      "pages/257" 
     ] 
}, 
    Children: [ 
     { 
      Heading: "Foo", 
      MainBody: null, 
      Id: "pages/226", 
      Metadata: { 
       Name: "I'm an article", 
       Title: null, 
       Keywords: null, 
       Description: null, 
       DisplayInMenu: true, 
       Published: "/Date(1334511318838)/", 
       Changed: "/Date(1334511318838)/", 
       ChangedBy: "Marcus", 
       IsPublished: true, 
       IsDeleted: false, 
       Slug: "i-m-an-article", 
       Url: "i-m-an-article", 
       SortOrder: 1 
      }, 
      Parent: {}, 
      Children: [ ] 
     }, 
     { 
      Heading: "Bar", 
      MainBody: null, 
      Id: "pages/257", 
      Metadata: { 
       Name: "Foo", 
       Title: null, 
       Keywords: null, 
       Description: null, 
       DisplayInMenu: true, 
       Published: "/Date(1334953500167)/", 
       Changed: "/Date(1334953500167)/", 
       ChangedBy: "Marcus", 
       IsPublished: true, 
       IsDeleted: false, 
       Slug: "foo", 
       Url: "foo", 
       SortOrder: 2 
      }, 
      Parent: {}, 
      Children: [ ] 
     } 
    ] 
} 

などのサーバからのJSONレスポンスを持っていますtbodyの各trはbackbone.jsを使ったビューでなければならないので、この特定の行のいくつかのイベントを配線することができます。今

<table> 
    <caption><%= CurrentModel.Metadata.Name %></caption> 
    <thead> 
     <tr> 
      <th><span>Page name</span></th>     
      <th><span>Slug</span></th> 
      <th><span>Published</span></th> 
      <th><span>Changed</span></th> 
     </tr> 
    </thead> 
    <tbody> 
     <% _(Children).each(function(page) { %> 
      <tr> 
       <td><%= page.Metadata.Name %></td> 
       <td><%= page.Metadata.Slug %></td> 
       <td><%= page.Metadata.IsPublished %></td> 
       <td><%= page.Metadata.Changed %></td> 
      </tr>      
     <% }); %> 
    </tbody> 
</table> 

、私の質問は、私のバックボーンビューとモデルはのようになりますか、それはこのように使用されるものではない方法ですか？以下のjavasscriptコードは、サーバーからの応答がちょうどCollection of Pageである場合は動作し、複雑なモデルを使用して部品をレンダリングできるようにコードを変更する方法はわかりません1つまたは2つのjavascriptビューでそのモデルの

私はこのコードPageCollectionこの

var PageCollection = Backbone.Collection.extend({ 
    url: '/pages', 
    model: Page 
}); 

この

Page = Backbone.Model.extend({ 
    metadata: { 
     name: null, 
     title: null, 
     keywords: null, 
     description: null, 
     displayInMenu: null, 
     published: null, 
     changed: null, 
     changedBy: null, 
     isPublished: null, 
     isDeleted: null, 
     slug: null, 
     url: null, 
     sortOrder: null 
    }, 
    parent: {}, 
    children: [], 
    ancestors: null, 
    initialize: function() { } 
}); 

のようなモデルクラスPageListView

のように見えます

pages: function() { 
    this.pageList = new PageCollection(); 
    this.pageListView = new PageListView({ model: this.pageList }); 
    this.pageList.fetch(); 
} 

を持っている私application.jsで

で、その後

var PageCollection = Backbone.Collection.extend({ 
    url: '/pages', 
    model: Page, 

    parse: function(response) { 
     this.CurrentModel=new Page(response.CurrentModel); 
     return response.Children; 
    } 
}); 

：

とPageListItemView

PageListItemView = Backbone.View.extend({ 
    tagName: "tr", 
    template: _.template($('#tpl-page-list-item').html()), 
    events: { 
     "click td input[type=checkbox]": "publish" 
    }, 
    render: function (eventName) { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    publish: function (event) { 
     alert('Publish'); 
    } 
}); 

Answer 1

まず最後のは、私は、ページのリストを取得し、多分CurrentModel定義をつかむために、コレクションにデータを解析します行テンプレートを

<script id="tpl-page-list-item" type="text/template"> 
    <tr> 
     <td><%= Metadata.Name %></td> 
     <td><%= Metadata.Slug %></td> 
     <td><%= Metadata.IsPublished %></td> 
     <td><%= Metadata.Changed %></td> 
     <td><input type='checkbox' /></td> 
    </tr> 
</script> 

のように設定して、あなたのビューを多かれ少なかれあなたのように定義することができます

var PageListItemView = Backbone.View.extend({ 
    template: _.template($('#tpl-page-list-item').html()), 
    events: { 
     "click input[type=checkbox]": "publish" 
    }, 
    render: function (eventName) { 
     var html=this.template(this.model.toJSON()); 
     this.setElement($(html)); 
     return this; 
    }, 
    publish: function() { 
     console.log(this.model.get("Metadata").Name); 
    } 
}); 

var PageListView = Backbone.View.extend({ 
    tagName: 'table', 
    initialize: function() { 
     this.collection.bind("reset", this.render, this); 
    }, 
    render: function (eventName) { 
     this.$el.empty(); 

     this.collection.each(function(page) { 
      var pageview=new PageListItemView({ model: page }); 
      var $tr=pageview.render().$el;   
      this.$el.append($tr); 
     },this); 

     return this; 
    } 
}); 

がデータをフェッチ、コレクションやビューを初期化し、そしてあなたは、このフィドルと同等のものを持っている必要があり、それらを持っていた：http://jsfiddle.net/NtmB4/

var coll=new PageCollection(); 
var view=new PageListView({collection:coll}) 
$("body").append(view.render().el); 

coll.fetch(); 

そして、あなたの完全なテンプレートに対応するフィドルhttp://jsfiddle.net/NtmB4/2/