0

次の場所からバックボーン ボイラープレートを使用して 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 で、次のようにビューを作成しました。

 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 はexample-1-result、DOM で ID を持つ要素を探します。テンプレートがまだDOMに挿入されていない場合（そうではないと思います）、jqueryは要素を見つけられないため、要素ではなく、大きな空白の何かに追加します...

ビューのその行を次のように変更してみてください。

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