使用 backgrid.js 填充 JSON 的主干.js答案

【问题标题】：backbone.js with backgrid.js to populate JSON使用 backgrid.js 填充 JSON 的主干.js
【发布时间】：2013-03-31 11:37:06
【问题描述】：

我正在使用 backgrid.js 和主干.js。我正在尝试在 backgrid 中填充 JSON（用户列表）。下面是我的 JSON，

[{“名称”：“kumnar”，“emailId”：“kumar@xxx.com”， “位置”：{“名称”：“ABC Inc.”，“省”：“CA”} }]

我可以按如下方式访问姓名和电子邮件ID，

我的问题是，如何添加显示位置名称的列？

我在列的 name 属性中指定了 locations.name，但它不起作用。 { 名称：“位置。名称”，标签：“电子邮件ID”，单元格：“字符串” }

谢谢

【问题讨论】：

标签： backbone.js backgrid

【解决方案1】：

backgrid 和 backgrid 目前都不提供对嵌套模型属性的任何支持，尽管有许多票正在进行中。要正确显示位置信息，您可以将位置对象转换为服务器上的字符串并在 backgrid 中使用字符串单元格，或者您可以尝试为位置列提供自己的cell implementation。

另外，您可以尝试backbone-deep-model，因为它似乎支持您正在寻找的路径语法。我以前没有尝试过，但如果它有效，您可以分别创建 2 个字符串列，分别称为 location.name 和 location.province。

【讨论】：

【解决方案2】：

扩展 Cell（或任何现有的扩展，如 StringCell）非常容易。这是你的开始：

var DeepstringCell = Backgrid.DeepstringCell = StringCell.extend({

    render: function () {
        this.$el.empty();
        var modelDepth = this.column.get("name").split(".");
        var lastValue = this.model;
        for (var i = 0;i<modelDepth.length;i++) {
            lastValue = lastValue.get(modelDepth[i]);
        }
        this.$el.text(this.formatter.fromRaw(lastValue));
        this.delegateEvents();
        return this;
    },

});

在此示例中，您将使用“deepstring”而不是“string”作为列的“cell”属性。如果您想重用内置格式化程序以及深度模型支持，请进一步扩展它以使用不同的格式化程序（如 EmailFormatter）。这就是我所做的，而且效果很好。更好的是覆盖单元定义以查找“。”在名称值中并将其视为深度模型。

请注意，这仅适用于我使用骨干关系，它从“get”调用返回模型实例。

【讨论】：