Question

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


    [{"name": "kumnar", "emailId":"kumar@xxx.com", 
    "locations":{"name":"ABC Inc.,", "province":"CA"}
    }]

我可以访问姓名＆amp; emailId如下，


    var User = Backbone.Model.extend({});
    var User = Backbone.Collection.extend({
        model: User,
        url: 'https://localhost:8181/server/rest/user',
    }); 

    var users = new User();
    var columns = [{
            name: "loginId",
            label: "Name",
            cell: "string"
        }, {
            name: "emailId",
            label: "E-mail Id",
            cell: "string"
        }
    ]; 

    var grid = new Backgrid.Grid({
        columns: columns,
        collection: users
    });

    $("#grid-result").append(grid.render().$el);
    userEntities.fetch();

我的问题是，如何添加列以显示locations.name？

我在列的name属性中指定了locations.name但它不起作用。 { name：“locations.name”， label：“电子邮件ID”， cell：“string” }

由于

Answer 1

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

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

Answer 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）。这就是我所做的，而且效果很好。更好的是覆盖Cell定义以寻找“。”。在名称值中，将其视为深层模型。

请注意，这只能起作用，因为我使用了从“get”调用中返回Model实例的backbone-relational。

使用backgrid.js的backbone.js来填充JSON

2 个答案: