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

Question

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

 

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

я могу получить доступ к имени & 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?

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

Благодаря

Answer 1

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

Кроме того, вы можете попробовать 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; 
    }, 

}); 

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

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