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] не имеет какого-либо метода 'listenTo' происходит в процессе инициализации сетки на этом шаге:

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

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

Answer 1

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

Backgrid.js depends on 3 libraries to function:

jquery >= 1.7.0, underscore.js ~ 1.4.0, and 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": "w@test.net","type": 1}, 
     {"name": "Ducky", "address": "a 2nd address", "tel": 25500123, "email": "w@test1.net","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); 
});