Backgrid не может отображать столбцы

Question

Я только изучаю основы backgrid.js. Поэтому, когда я пытаюсь повторить код на главной странице Backgrid.js, я не могу отобразить сетку из-за конкретной ошибки при передаче массива объектов для столбцов. Я считаю, что я использую правильный формат

 var columns = [
    { name: "name", label: "Name", cell: "string" },
    { name: "address", label: "Address", cell: "string" },
    { name: "tel", label: "Phone", cell: "integer" },
    { name: "email", label: "Email", cell: "string" },
    { name: "type", label: "Contact Type", cell: "string" }
];

Ошибка Uncaught TypeError: Object [object Object] не имеет метода listenTo, возникает в процессе инициализации сетки на этом шаге:

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

Есть ли проблема с тем, как я инициализирую сетку?

Answer 1

Проблема была с версией backbone.js, которую я использовал. Я рекомендую использовать правильную версию библиотек.

Backgrid.js зависит от 3 библиотек:

jquery> = 1.7.0, underscore.js ~ 1.4.0 и backbone.js ~ 0.9.10.

Answer 2

Вот простая структура о том, как его использовать.

HTML

<div id="container"></div>

JS

$(function(){
    /** Columns definition */
    var columns = [
    { name: "name", label: "Name", cell: "string" },
    { name: "address", label: "Address", cell: "string" },
    { name: "tel", label: "Phone", cell: "integer" },
    { name: "email", label: "Email", cell: "string" },
    { name: "type", label: "Contact Type", cell: "string" }
    ];

    /** Model instance */
    var mdl = Backbone.Model.extend({});

    /** Collection instance */
    var col = Backbone.Collection.extend({
        model: mdl  
    });

    /** Test array of JSON (usually coming from a server) */
    var json = [
        {"name": "Goose", "address": "a 1st address", "tel": 25500100, "email": "[e-mail]","type": 1},
        {"name": "Ducky", "address": "a 2nd address", "tel": 25500123, "email": "[e-mail]","type": 2}
   ];

   /** Create the Grid */
   var grid = new Backgrid.Grid({
      columns: columns,
      collection: new col(json)
   });

   /** Add the Grid to the container */
   $("#container").append(grid.render().$el);
});