Подтвердить что ты не робот

Render html table с помощью шаблона подчеркивания с использованием базовой комплексной модели

Я пытаюсь отобразить таблицу 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 в теле должен быть представлением с использованием 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');
    }
});
4b9b3361

ОТВЕТЫ

Ответ 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/