Làm cho bảng html bằng công cụ mẫu gạch dưới sử dụng mô hình phức hợp xương sống

Question

Tôi đang cố gắng hiển thị bảng html bằng cách sử dụng công cụ mẫu gạch dưới. Trước tiên tôi phải phản ứng JSON từ máy chủ như thế này

{ 
    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: [ ] 
     } 
    ] 
} 

Kết quả HTML Tôi đang tìm là khá nhiều như thế này mà tôi in một số dữ liệu từ CurrentModel và lặp thông qua thuộc tính cho trẻ em, tốt nhất mỗi tr trong tbody phải là một khung nhìn bằng cách sử dụng backbone.js để tôi có thể kết nối một số sự kiện cho hàng cụ thể này.

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

Bây giờ, câu hỏi của tôi là quan điểm và mô hình xương sống của tôi trông như thế nào hoặc không được sử dụng như thế này? Mã javasscript bên dưới hoạt động và hiển thị tr cho mỗi Trẻ em nếu phản hồi từ máy chủ chỉ là Bộ sưu tập Trang, tôi hiểu cách nhưng tôi không biết cách sửa đổi mã để có thể lấy một mô hình phức tạp và sau đó hiển thị các phần của mô hình đó trong một hoặc có thể là hai chế độ xem javascript?

Trong application.js của tôi, tôi có mã này

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

nơi PageCollection trông như thế này

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

lớp mô hình như thế này

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

các PageListView

PageListView = Backbone.View.extend({ 
    tagName: 'table', 
    initialize: function() { 
     this.model.bind("reset", this.render, this); 
    }, 
    render: function (eventName) { 
     _.each(this.model.models, function (page) { 
      $(this.el).append(new PageListItemView({ model: page }).render().el); 
     }, this); 
     return this; 
    } 
}); 

và cuối cùng là 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

Trước tiên, tôi sẽ phân tích các dữ liệu vào bộ sưu tập để có được một danh sách các trang và có thể lấy CurrentModel định nghĩa:

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

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

Sau đó, với mẫu hàng được thiết lập là

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

bạn có thể xác định lượt xem của mình nhiều hơn hoặc ít hơn như bạn có họ

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

Khởi tạo bộ sưu tập và các quan điểm, lấy dữ liệu, và bạn nên có một cái gì đó tương đương với Fiddle này: http://jsfiddle.net/NtmB4/

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

coll.fetch(); 

Và một Fiddle tương ứng với mẫu đầy đủ của bạn http://jsfiddle.net/NtmB4/2/