backbone 模板 html,backbone.js - Render html table with underscore template engine using a backbone co...

I'm trying to render an html table using underscore template engine. First I have the JSON response from the server like this

{

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

}

]

}

The HTML result I'm looking for is pretty much like this where i print some of the data from the CurrentModel and the iterate through the Children property, preferably each tr in the the tbody should be a view using backbone.js so I can wire up some events for this particular row.

Page nameSlugPublishedChanged

Now, my question is how should my backbone views and models look like or is it not meant to be used like this? The javasscript code below works and renders a tr for each Children if the response from the server is just a Collection of Page, I understand way but I don't know how to modify the code so it can take a complex model and then render parts of that model in one or maybe two javascript views?

In my application.js I have this code

pages: function () {

this.pageList = new PageCollection();

this.pageListView = new PageListView({ model: this.pageList });

this.pageList.fetch();

}

where PageCollection looks like this

var PageCollection = Backbone.Collection.extend({

url: '/pages',

model: Page

});

the model class like this

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

});

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

}

});

and at last the 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');

}

});