CODEWITHSUNDEEP
backbone.jsrequirejshandlebars.js
yarek
yarek

Reputation: 12034

backbone handlebars and requirejs: handlebars returns a function instead of html

This is my simple BackboneView when I try to load the widget.tpl. However the template var contains a function()

What do I do wrong ?

define(['hbs!templates/widget'],function (template) {
var template = Handlebars.compile( template );
console.log(template);

MyView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using Handlebars

       console.log(template);
        //this.el.html( template );
    }
});
    return MyView;
});

widget.tpl has 

<div>helloworld</div>

Upvotes: 0

Views: 94

Answers (1)

Jonathan Beebe
Jonathan Beebe

Reputation: 5226

Careful not to redefine the template variable. The hbs plugin returns the compiled Handlebars function, as you can see in the docs. It would probably be better like this:

define(['hbs!templates/widget'],function (template) {
    console.log(template); // -> logs compiled Handlebars template function

    var MyView = Backbone.View.extend({
        render: function(){
            // Compile the template using Handlebars
            this.$el.append(template());
            return this;
        }
    });
    return MyView;
});

Also, you probably don't want to render the view in initialize. Initialize should only set up your view; rendering within initialize introduces unwanted side effects when creating an instance. Somewhere else in your code you'll have this:

var MyView = require('MyView');
var view = new MyView();
$('body').append(view.render().el);

Upvotes: 1

Related Questions