Визуализировать html-таблицу с помощью механизма шаблонов подчеркивания, используя магистральную сложную модель

Я пытаюсь отобразить html-таблицу с помощью механизма шаблонов подчеркивания. Сначала у меня есть ответ JSON от сервера, подобный этому

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

. Результат HTML, который я ищу, очень похож на этот, где я печатаю некоторые данные из CurrentModel и повторяю свойство Children, предпочтительно каждый tr в tbody должен быть представлением, использующим 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 работает и отображает tr для каждого дочернего элемента, если ответ сервера представляет собой просто коллекцию страниц, я понимаю, но я не знаю, как изменить код, чтобы он мог принимать сложную модель, а затем отображать части этой модели в одном или двух представлениях javascript?

В моем application.js у меня есть этот код

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

где 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

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

и, наконец, 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');
    }
});