0

我正在尝试使用来自以下位置的 Backbone 样板来实现 BackGrid： https ://github.com/azat-co/super-simple-backbone-starter-kit

1.使用以下代码创建一个名为 GridHandler.js 的文件：

var Territory = Backbone.Model.extend({});

var Territories = Backbone.Collection.extend({
model: Territory,
url: "data/territories.json"
});

var territories = new Territories();

var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
  orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
 }, {
name: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
 }, {
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
 }, {
name: "date",
label: "Date",
cell: "date"
 }, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML anchor element
}];

2.grid.html 文件包含一个 id 为“example-1-result”的 DIV。

3.在app.js中创建了一个View如下：

 require(['libs/text!header.html', 'libs/text!home.html', 'libs/text!grid.html', 'libs/text!footer.html', 'js/GridHandler'], 
 function (headerTpl, homeTpl, gridTpl, footerTpl, gridHandler) {

 // Other Views here.

 GridView = Backbone.View.extend({
    el: "#content",
    template: gridTpl,
    initialize: function() {
        // Initialize a new Grid instance
        var grid = new Backgrid.Grid({
          columns: columns,
          collection: territories
        });

        // Render the grid and attach the root to your HTML document
        $("#example-1-result").append(grid.render().el);

        // Fetch some countries from the url
        territories.fetch({reset: true});
    },
    render: function() {
        $(this.el).html(_.template(this.template));
    }
});

app = new ApplicationRouter();
Backbone.history.start();   
});

即使将带有 DIV 标记“example-1-result”模板内容的 grid.html 分配给内容区域，网格也不会显示。

grid.render().el -> 正确生成网格表。

为什么网格没有显示在 #content -> #example-1-result 中？

'#example-1-result' 在模板文件中，这是问题所在吗？

换个方式的问题：

我们如何将一些数据分配给视图模板中的 DIV？

4

1 回答 1

0

在您看来，您有：

$("#example-1-result").append(grid.render().el);

Jqueries 在 DOM 中查找具有 ID 的元素example-1-result。如果您的模板尚未插入 DOM（我相信不是），jquery 将找不到您的元素，因此将其附加到巨大空白中的某些东西，而不是您的元素......

尝试在您的视图中将该行更改为：

this.$el.append(_.template(this.template));
this.$el.find("#example-1-result").append(grid.render().el)
于 2014-07-17T07:34:42.050 回答