Question

I’ve been trying my hand with Backbone.js, that didn’t go well so I’ve decided to start from the ground up, and getting my head round OOP with javascript, i thought i was doing pretty well btu now my templates just wont be rendered, I cant tell whether there is a problem with the template, the js, both, or the data!!

my template :

<script id="BudgetItemTemplate" type="text/x-handlebars-template">
{{#list data}}
 <div class="budget-item">
  <div class="item-info">{{type}}</div>
  <div class="item-spent">{{spent}}</div>
  <div class="item-budget">{{budget}}</div>
 </div>
{{/list}}   
</script>

my javascript :

var data = [];
var BudgetItems = [data];
var BudgetItemTemplateSource = $('#BudgetItemTemplate').html();
var BudgetItemTemplate = Handlebars.compile(BudgetItemTemplateSource);

function BudgetItem(type, spent, budget) {

   "use strict";
   this.type = type;
   this.spent = spent;
   this.budget = budget;

   this.editType = function (type) {
    this.type = type;
    return this;
};
this.editSpent = function (spent) {
    this.spent = spent;
    return this;
};
this.editBudget = function (budget) {
    this.budget = budget;
    return this;
};

 data.push({type: 'type', spent: 'spent', budget: 'budget'});
}

function BudgetItemList() {
this.BudgetItems = BudgetItems;
   this.render = function () {
    console.log('rendercalled')
      $('#iBudget').empty();
      $('#iBudget').append(BudgetItemTemplate(BudgetItems));
};
};

$(document).ready(function () {
var food = new BudgetItem('food', '0.00', '10.00');
var drink = new BudgetItem('drink', '10000.00', '450.00');
var bills = new BudgetItem('bills', '30.00', '50.00');
console.log(food.budget);
food.editType('basics');
console.log(food.type);
   console.log(BudgetItems);

var budgetlist = new BudgetItemList();    
budgetlist.render();
console.log(BudgetList.BudgetItems);

});

I just can’t get my head around why the template won’t render, I’ve tried several different ways of setting up my data, at the moment it is an array of an array, before I’ve had it as just an array. also in the template if tried using the ‘list’ helper with both a context and no context it both cases of data., i’ve used alerts throughout to debug and the problem seems to be with handlebars, but i cant figure it out! I would appreciate any comments, criticism or help.

Answer 1

First of all, you have this in your template:

{{#list data}}
    ...
{{/list}}

but {{#list}} isn’t defined by Handlebars and I don’t see a Handlebars.registerHelper call anywhere that would add such a custom helper. So I’ll assume that you meant to use the standard built in iterator {{#each}}:

<script id="BudgetItemTemplate" type="text/x-handlebars-template">
    {{#each data}}
       <div class="budget-item">
           <div class="item-info">{{type}}</div>
           <div class="item-spent">{{spent}}</div>
           <div class="item-budget">{{budget}}</div>
       </div>
    {{/each}}   
</script>​

You’re on the right track with your “the template wants an object” idea but your implementation is a bit off. A compiled Handlebars template wants an object to use as a key/value namespace; so if you want to refer to {{x}} in a template then you need to call the template function like this:

var html = template({
    x: 'some value'
});

Based on your template, you need to call the compiled template function with data like this:

var html = template({
    data: [
        { type: 'pancakes', spent: 10, budget: 10 },
        { type: 'eggs',     spent:  5, budget:  1 },
        { type: 'stamps',   spent:  1, budget:  5 }
    ]
});​​​​​​​​​​​​​​

Here’s a demo of the template in action (excuse my horrifically bad color sense): http://jsfiddle.net/ambiguous/BVPRb/