backbone.js с backgrid.js для заполнения JSON

Question

Я использую backgrid.js с backbone.js. Я пытаюсь заполнить JSON (список пользователей) в backgrid. Ниже мой JSON,

    [{"name": "kumnar", "emailId": "[e-mail]", 
    "location":{"name":"ABC Inc.", "провинция":"CA"}
    }]

Я могу получить доступ к имени и emailId, как показано ниже,

    var User = Backbone.Model.extend ({});
    var User = Backbone.Collection.extend ({
        модель: пользователь,
        url: 'https://localhost:8181/server/rest/user',
    }); 

    var users = new User();
    столбцы var = [{
            имя: "loginId",
            ярлык: "Имя",
            ячейка: "строка"
        }, {
            имя: "emailId",
            ярлык: "E-mail Id",
            ячейка: "строка"
        }
    ]; 

    var grid = новая Backgrid.Grid({
        столбцы: столбцы,
        коллекция: пользователи
    });. $("# Сетки результат") добавить (. Grid.render () $ эш);
    userEntities.fetch();

У меня вопрос, как мне добавить столбец для отображения location.name?

Я указал location.name в свойстве name столбцов, но оно не работает. { name: "location.name", метка: "E-mail Id", ячейка: "строка"}

Спасибо

Answer 1

И магистральные, и backgrid в настоящее время не предлагают никакой поддержки для вложенных атрибутов модели, хотя в настоящее время существует ряд заявок. Чтобы правильно отобразить информацию о местоположениях, вы можете либо превратить объект местоположений в строку на сервере и использовать строковую ячейку в backgrid, либо вы можете попытаться указать собственную реализацию ячейки для столбца местоположений.

Кроме того, вы можете попробовать backbone-deep-model, так как он поддерживает синтаксис пути, который вы ищете. Я не пробовал раньше, но если это работает, вы можете просто создать 2 строковых столбца с именем 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;
    },

});

В этом примере вы использовали бы "глубокую строку" вместо "строка" для атрибута "ячейка" вашего столбца. Расширьте его, чтобы использовать другой форматтер (например, EmailFormatter), если вы хотите повторно использовать встроенные форматеры вместе с глубокой поддержкой моделей. Это то, что я сделал, и это прекрасно работает. Еще лучше переопределить определения Cell, чтобы искать "." в значении имени и относиться к нему как к глубокой модели.

Имейте в виду, это работает только потому, что я использую backbone-реляционный метод, который возвращает экземпляры Model из вызовов get.