使用骨干复杂的模型显示HTML表下划线模板引擎 [英] Render html table with underscore template engine using a backbone complex model

问题描述

我试图渲染使用下划线模板引擎的HTML表。首先我有这样的服务器

JSON响应

  {
    CurrentModel：{
        回家了，
        ID：页/ 193
        元数据：{
            产品名称：家，
            标题：空，
            关键词：空，
            说明：空，
            DisplayInMenu：真实，
            发布时间：/日期（1334499539404）/
            更改：/日期（1334499539404）/
            ChangedBy：马库斯
            |评论：真的，
            请将isDeleted：假的，
            弹头：空，
            网址：零，
            SortOrder的：0
        }，
        家长：空，
        儿童：
            页/ 226
            页/ 257
        ]
}，
    儿童：
        {
            标题：富，
            型主体：空，
            ID：页/ 226
            元数据：{
                名称：我的文章
                标题：空，
                关键词：空，
                说明：空，
                DisplayInMenu：真实，
                发布时间：/日期（1334511318838）/
                更改：/日期（1334511318838）/
                ChangedBy：马库斯
                |评论：真的，
                请将isDeleted：假的，
                弹头：我-M-AN-文章，
                网址：我-M-AN-文章，
                SortOrder的：1
            }，
            家长：{}，
            儿童：[]
        }，
        {
            标题：酒吧，
            型主体：空，
            ID：页/ 257
            元数据：{
                产品名称：富，
                标题：空，
                关键词：空，
                说明：空，
                DisplayInMenu：真实，
                发布时间：/日期（1334953500167）/
                更改：/日期（1334953500167）/
                ChangedBy：马库斯
                |评论：真的，
                请将isDeleted：假的，
                弹头：富，
                网址：富，
                SortOrder的：2
            }，
            家长：{}，
            儿童：[]
        }
    ]
}
 

HTML结果我要找的是pretty喜欢这个在那里我打印了一些来自CurrentModel数据，并通过孩子们的财产，$ P $的迭代pferably中的每一个TBODY TR应属查看使用Backbone.js的，所以我可以关联一些事件的用于特定的行。

 ＆LT;表＆gt;
    ＆LT;标题＆GT;＆LT;％= CurrentModel.Metadata.Name％GT;＆LT; /字幕＆GT;
    ＆LT;＆THEAD GT;
        ＆所述; TR＆GT;
            百分位＆GT;＆LT;跨度＆gt;页面名称＆LT; / SPAN＆GT;＆LT; /第i
            百分位＆GT;＆LT;跨度＆GT;弹头＆LT; / SPAN＆GT;＆LT; /第i
            百分位＆GT;＆LT;跨度＆GT;＆出版LT; / SPAN＆GT;＆LT; /第i
            百分位＆GT;＆LT;跨度＆GT;改变和LT; / SPAN＆GT;＆LT; /第i
        ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
    ＆LT;＆TBODY GT;
        ＆LT;％_（儿童）。每个（函数（页）{％GT;
            ＆所述; TR＆GT;
                ＆所述; TD＆GT;＆下;％= page.Metadata.Name％GT;＆下; / TD＆GT;
                ＆所述; TD＆GT;＆下;％= page.Metadata.Slug％GT;＆下; / TD＆GT;
                ＆所述; TD＆GT;＆下;％= page.Metadata.IsPublished％GT;＆下; / TD＆GT;
                ＆所述; TD＆GT;＆下;％= page.Metadata.Changed％GT;＆下; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆所述;％}）; ％GT;
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

现在，我的问题是如何使我的骨干视图和模型的样子，或者它并不意味着像这样被使用？在使用JavasScript code以下工作，并使每个儿童一TR如果从服务器的响应只是一个页面的收集，我理解的方式，但我不知道如何修改code，因此可以采取复杂的模型，然后渲染模型的部分在一个或者两个JavaScript的看法？

在我的application.js我有这个code

 页：功能（）{
    this.pageList =新PageCollection（）;
    this.pageListView =新PageListView（{模式：this.pageList}）;
    this.pageList.fetch（）;
}
 

在这里PageCollection看起来像这样

  VAR PageCollection = Backbone.Collection.extend（{
    网址：/页，
    型号：页
}）;
 

这样的模型类

 页= Backbone.Model.extend（{
    元数据：{
        名称：空，
        标题：空，
        关键字：空，
        描述：空，
        displayInMenu：空，
        出版：空，
        更改：空，
        changedBy：空，
        |评论：空，
        请将isDeleted：空，
        弹头：空，
        网址：零，
        中将sortOrder：空
    }，
    父：{}，
    孩子：[]，
    祖先：空，
    初始化：功能（）{}
}）;
 

在PageListView

  PageListView = Backbone.View.extend（{
    标签名：'表'，
    初始化：功能（）{
        this.model.bind（复位，this.render，这一点）;
    }，
    渲染：功能（eventName的）{
        _.each（this.model.models，功能（页）{
            $（this.el）.append（新PageListItemView（{模式：PAGE}）渲染（）EL）;
        }， 这个）;
        返回此;
    }
}）;
 

和最后的PageListItemView

  PageListItemView = Backbone.View.extend（{
    标签名：TR，
    模板：_.template（$（'＃TPL页的清单项目）HTML（）。）
    事件：{
        点击TD输入[类型=复选框]：发布
    }，
    渲染：功能（eventName的）{
        $（this.el）的.html（this.template（this.model.toJSON（）））;
        返回此;
    }，
    发布：函数（事件）{
        警报（'发布'）;
    }
}）;
 

解决方案

首先，我的数据解析到集合，以获得页面的列表，也许抢 CurrentModel 定义：

  VAR PageCollection = Backbone.Collection.extend（{
    网址：/页，
    型号：页面，    解析：功能（响应）{
        this.CurrentModel =新页（response.CurrentModel）;
        返回response.Children;
    }
}）;
 

然后，与行模板设置为

 ＆LT;脚本ID =TPL-页列表项类型=文/模板＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD＆GT;＆下;％= Metadata.Name％GT;＆下; / TD＆GT;
        ＆所述; TD＆GT;＆下;％= Metadata.Slug％GT;＆下; / TD＆GT;
        ＆所述; TD＆GT;＆下;％= Metadata.IsPublished％GT;＆下; / TD＆GT;
        ＆所述; TD＆GT;＆下;％= Metadata.Changed％GT;＆下; / TD＆GT;
        ＆LT; TD＆GT;＆LT;输入类型=复选框/＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; / SCRIPT＆GT;
 

您可以定义你的观点或多或少就像你让他们

  VAR PageListItemView = Backbone.View.extend（{
    模板：_.template（$（'＃TPL页的清单项目）HTML（）。）
    事件：{
        点击输入[类型=复选框]：发布
    }，
    渲染：功能（eventName的）{
       变种的html = this.template（this.model.toJSON（））;
       this.setElement（$（HTML））;
       返回此;
    }，
    发布：功能（）{
        的console.log（this.model.get（元数据）的名称。）;
    }
}）;VAR PageListView = Backbone.View.extend（{
    标签名：'表'，
    初始化：功能（）{
        this.collection.bind（复位，this.render，这一点）;
    }，
    渲染：功能（eventName的）{
        这$ el.empty（）;        this.collection.each（功能（页）{
            VAR浏览量=新PageListItemView（{模式：PAGE}）;
            变量$ = TR pageview.render（）$埃尔。
            这$ el.append（$ TR）。
        }，这个）;        返回此;
    }
}）;
 

初​​始化集合和观点，获取数据，你应该有一些等效于此小提琴： http://jsfiddle.net/NtmB4 /

  VAR科尔=新PageCollection（）;
VAR视图=新PageListView（{集合：科尔}）
$（机构）追加（view.render（）EL）。coll.fetch（）;
 

和对应的完整的模板 http://jsfiddle.net/NtmB4/2/

提琴

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.

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

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

解决方案

First, I would parse the data into the collection to get a list of the pages and maybe grab the CurrentModel definition :

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

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

Then, with the row template set up as

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

you can define your views more or less like you had them

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

Initialize the collection and the views, fetch the data, and you should have something equivalent to this Fiddle : http://jsfiddle.net/NtmB4/

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

coll.fetch();

And a Fiddle corresponding to your full template http://jsfiddle.net/NtmB4/2/

这篇关于使用骨干复杂的模型显示HTML表下划线模板引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！