Backgrid 无法渲染列答案

【问题标题】：Backgrid unable to render columnsBackgrid 无法渲染列
【发布时间】：2013-01-24 16:47:34
【问题描述】：

我只是在学习 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] has no method 'listenTo'：

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

我如何初始化网格有问题吗？

【问题讨论】：

您也可以发布您的 HTML 吗？

标签： backbone.js backgrid

【解决方案1】：

这是一个关于如何使用它的简单结构。

HTML

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

$(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);
});

【讨论】：

不幸的是，这似乎不是格式问题。使用给定的格式。初始化网格时，当它尝试在第 1620 行调用 self.listenTo(column,"change:renderable",self.renderColumn) 函数时，我仍然收到相同的错误（上图）。

【解决方案2】：

问题出在我使用的主干.js 版本上。我建议使用正确版本的库。

Backgrid.js 依赖 3 个库来运行：

jquery >= 1.7.0，underscore.js ~ 1.4.0，backscore.js ~ 0.9.10。

【讨论】：