एक रीढ़ की हड्डी जटिल मॉडल

Question

का उपयोग कर अंडरस्कोर टेम्पलेट इंजन के साथ एचटीएमएल टेबल प्रस्तुत करें मैं अंडरस्कोर टेम्पलेट इंजन का उपयोग कर एक 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: [ ] 
     } 
    ] 
} 

एचटीएमएल परिणाम मैं तलाश कर रहा हूँ काफी इस जहां मैं बच्चे संपत्ति के माध्यम से CurrentModel और दोहराएं से कुछ डेटा प्रिंट की तरह है जैसे सर्वर से JSON उत्तर, अधिमानतः है टेब में प्रत्येक 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> 

अब, मेरा सवाल यह है कि मेरे रीढ़ की हड्डी के विचार और मॉडल कैसा दिखते हैं या इसका उपयोग इस तरह नहीं किया जाना चाहिए? नीचे दिया गया जावास्क्रिप्ट कोड काम करता है और प्रत्येक बच्चे के लिए एक tr प्रस्तुत करता है यदि सर्वर से प्रतिक्रिया केवल पृष्ठ का संग्रह है, मैं समझता हूं लेकिन मुझे नहीं पता कि कोड को कैसे संशोधित किया जाए ताकि यह एक जटिल मॉडल ले सके और फिर भागों को प्रस्तुत कर सके उस मॉडल का एक या शायद दो जावास्क्रिप्ट विचारों में?

मेरी application.js में मैं इस कोड है

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

जहां PageCollection इस

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

की तरह इस

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

की तरह लग रहा मॉडल वर्ग

और पिछले 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 परिभाषा हड़पने होगा: फिर

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

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

, साथ पंक्ति टेम्पलेट

<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/