CODEWITHSUNDEEP
javascriptbackbone.jsrequirejshandlebars.jsjavascriptmvc
Ant Eksiler
Ant Eksiler

Reputation: 39

Backbone Boilerplate + Handlebars view not working

I am trying to learn Backbone, but I have a problem with how Handlebars.

I want to build a modular app, where there are separate files for views and templates.

Here is my app.js:

define([
  // Application.
  "app",
  "views/home",
],
function(app, homeView){
    var Router = Backbone.Router.extend({
routes: {
  "": "index",
  "home": "home"
},

index: function() {
    console.log('hello');
},
home: function() {
    console.log('home');
    homeView.render();
}
});
return Router;
});

At this point I am getting 'home' on console.

Here is views/home.js

define([
  'app',
  'text!templates/home.html'
], function(app, homeTxt) {
    var homeView = Backbone.View.extend({
    el: $('#main'),
        render: function(){
           console.log('render');
           var data  = { property : "1" };

           this.template = Handlebars.compile(homeTxt);

           this.el.append( this.template() );
        }
     });

   return new homeView;
});

Now I should get 'render' on console, but I am not getting it and the template at 'templates/home.html' is not rendered.

I am not getting any errors on console or DOM either.

Upvotes: 0

Views: 368

Answers (1)

monkeyboy
monkeyboy

Reputation: 542

I think you need to instantiate the view before you call render -

home: function() {
    var viewInstance = new homeView();
    console.log('home');
    viewInstance.render();
}

A lot of Backbone code samples don't help this confusion by not using capital letters to indicate things that should be instantiated (ie called with 'new'), and vice versa.

Upvotes: 1

Related Questions