CODEWITHSUNDEEP
backbone.jsunderscore.js
jordancooperman
jordancooperman

Reputation: 2011

using underscore variables with Backbone Boilerplate fetchTemplate function

I am building an application using the Backbone Boilerplate, and am having some trouble getting underscore template variables to work. I have a resource named Goal. My Goal View's render function looks like this:

render: function(done) {
  var view = this;

  namespace.fetchTemplate(this.template, function(tmpl) {
    view.el.innerHTML = tmpl();
    done(view.el);
  });
}

I'm calling it inside of another view, like so:

var Goal = namespace.module("goal"); 

App.View = Backbone.View.extend({

  addGoal: function(done) {

    var view = new Goal.Views.GoalList({model: Goal.Model});

    view.render(function(el) {
      $('#goal-list').append(el);
    });
  }
});

I'm using local storage to save my data, and it's being added just fine. I can see it in the browser, but for some reason, when I load up the app, and try to fetch existing data, i get this error: 

ReferenceError: Can't find variable: title

Where title is the only key I'm storing. It is a direct result of calling:

tmpl();

Any thoughts are greatly appreciated.

Upvotes: 1

Views: 1504

Answers (2)

abraham
abraham

Reputation: 47833

Your template is looking for a variable title, probably like this <%- title %>. You need to pass it an object like this tmpl({ title: 'Some title' })

Upvotes: 2

jordancooperman
jordancooperman

Reputation: 2011

Turns out, I wasn't passing in the model when i created the view, which was making it impossible to get the models data. Once I passed in the model correctly, I could then pass the data to tmpl, as correctly stated by @abraham.

render: function(done) {
    var 
    view = this,
    data = this.model.toJSON(); 

    clam.fetchTemplate(this.template, function(tmpl) {

    view.el.innerHTML = tmpl(data);

    done(view.el);
    });
},

Upvotes: 0

Related Questions