backbone.js json -> template

Question

This is my first time using backbone.js. I am trying to get a json string to parse out and populate a template I have.

JSON:

[
{
    "nav":{
            "feel":"Feel Well",
            "eat":"Eat Well",
            "move":"Move Well",
            "work":"Work Well",
            "sleep":"Sleep Well",
            "play":"Play Well"
    }
}
]

CODE:

//collection        
WH.ApplicationCollection = Backbone.Collection.extend({

  defaults: {
    model: WH.ApplicationModel
  },

  model: WH.ApplicationModel,
  url: 'json/test.json'

});

// View
WH.applicationView = Backbone.View.extend({

el: 'body',
template: _.template($('#header-template').html()),


initialize: function(){
    this.collection = new WH.ApplicationCollection();
    this.collection.bind("reset", this.render, this);
    this.collection.fetch();
},

render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON));
    return this;
}

});

MARKUP:

 <script id="header-template" type="text/template">
    <div id="header">
        <ul id="navigation">
            <li id="logo"><a data-target="home" data-index="0" href="#/home"><h1></h1></a></li>
            <% _.each(nav, function(navitem){ %>
                <li><a data-target="<%= navitem %>" data-index="1" href="#/<%= navitem %>">Feel Well</a></li>
            <% }); %>
        </ul>
    </div>
</script>

The console.log shows that the JSON string is being read. But when it comes to the actual template. it gives me the error:

Uncaught ReferenceError: nav is not defined

which is from the markup.

mpm · Accepted Answer · 2012-12-13T18:37:11.620

render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON()));
    return this;
}

toJSON is a function

You should review your template markup i'm pretty sure it's going to fail according your model.

i quote your code

render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON));
    return this;
}

backbone.js json -> template

1 Answers1