backbone.js - BackgridJs - 如何在网格中显示对象

Question

我想为此文档（模型）显示一个网格：

{
    id: "53f7ba4b30d2317912fc8004",
    title: "Hellow world",
    on_slideshow: false,
    country: {
        name: "United state",
        country_code: "US"
    }
    tags: [
        {
            name: "backbonejs"
            object_id: "72691"
        },
        {
            name: "backgrid"
            object_id: "72692"
        }
    ]
}

在我的 js 文件中..

var grid = new Backgrid.Grid({
    columns: [{
        name: "title",
        label: "Title",
        cell: "string"
    },
    {
        name: "country",
        label: "Country",
        cell: "string"
    },
    {
        name: "on_slideshow",
        label: "Slide",
        cell: "boolean"
    },
    {
        name: "tags",
        label: "Tags",
        cell: "string"
    },
    {
        name: "pub_date",
        label: "Publiched",
        cell: "string"
    }],
  collection: articles
}).render();

标签显示为 [object Object]、[object Object] 和国家根本没有显示。

如何正确显示它们，标签的名称和国家列表？

Answer 1

Backgrid 旨在为Collections 创建表，其中Models 的数据为 1 级深度，但您的Model数据为 2 级深度。您可以选择使用自定义格式化程序，或覆盖render您Column的 s的方法Cell，但可能最简单的解决方案只是稍微“扁平化”您的模型以使 Backgrid 易于消化。

例如：

var Article = Backbone.Model.extend({
    flatten: function() {
        var flatVersion = this.toJSON();
        flatVersion.country = this.get('country').name;
        flatVersion.tags = this.get('tags').join(', ');
        return new Backbone.Model(flatVersion);
    }
});

然后添加一个类似的 flatten 方法到你的Collection：

var Articles = Backbone.Collection.extend({
    flatten: function() {
        return this.invoke('flatten');
    }
});

然后最后将扁平化版本传递给 Backgrid：

var grid = new Backgrid.Grid({
    ...
    collection: articles.flatten()
});

希望有帮助。