Backbone and BackGrid with super-simple-backbone-starter-kit

Question

I'm trying to implement BackGrid using a Backbone boilerplate from the following location: https://github.com/azat-co/super-simple-backbone-starter-kit

1.Created a file called GridHandler.js with the following code:

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 file contains a DIV with id 'example-1-result'.

3.In the app.js created a View as follows:

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

The grid is not showing even if the grid.html with the DIV tag 'example-1-result' template content is assigned to content area.

grid.render().el -> generated the grid table properly.

Why the grid is not showing in the #content -> #example-1-result ?

'#example-1-result' is in the template file, is that is the issue?

The question in another way:

How can we assign some data to a DIV which is in a template from the View?

score 0 · Answer 1 · answered Jul 17 '14 at 07:34

0

In your view you have:

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

Jqueries looks for an element with ID example-1-result in the DOM. If your template is not yet inserted in the DOM (which I believe isn't) jquery won't find your element, thus appends it to something in the great void, but not to your element...

try changing that line in your view to:

this.$el.append(_.template(this.template));
this.$el.find("#example-1-result").append(grid.render().el)

answered Jul 17 '14 at 07:34

jorrebor

2,166
12
48
74

Thank you for your reply! FYI: Before adding your code, I checked and can see the DIV tab with id "#example-1-result" is already there in the HTML view of Firebug. I have added your code and it is not showing the grid. But, I saw the grid is working if I add the "DIV##example-1-result" just below the BODY tag(outside of the #container). That means through the view I'm not able to assign value to "DIV##example-1-result" in the template file. – San Jul 17 '14 at 08:41
1) console.log($("#example-1-result")); -> Object[ ] 2) console.log(this.$el.find("#example-1-result")); -> Object[div#example-1-result] – San Jul 17 '14 at 08:44
try `this.$el.append(grid.render().el)` after instantiating the new Backgrid. If the grid is visible it will be rendered in #container – jorrebor Jul 18 '14 at 10:32
the best way is to create a jsfiddle on jsfiddle.net, and post the link to it in your question. That way other people can also help you. – jorrebor Jul 19 '14 at 15:19
did you try render some arbitrary string in the element? like $("#example-1-result").append("some text"); ? – jorrebor Jul 19 '14 at 15:21
$("#example-1-result").append("some text"); -> is working from the console of Firebug but not through the application(.js file). – San Jul 20 '14 at 14:20
Please find the JSFiddle from the following link to see the exact issue. http://jsfiddle.net/Saneesh/Kq67g/10/ (Note: the HTML template file content I have added directly in the page as comment. It should be loaded as the result of the function getTemplate().) – San Jul 20 '14 at 15:36

Backbone and BackGrid with super-simple-backbone-starter-kit

1 Answers1