My Underscore template does not load / display all the model data, but does have access to it?

Question

UPDATE 2

I got it to work, for a fix I did just change my var name, but now I JSON encode it and it all seems to work fine.

Thanks

Glenn.

UPDATE

This sort of works now thanks to your post, but like I say in my comment I can only output my data when I console.log my data?

So this works,

   <script type="text/template" id="Template"> 
        <% _.each(MyXX, function(MyXX) { %>
           <%= console.log(MyXX.get('title')) %>
           <%= console.log(MyXX.get('path')) %>
           <%= console.log(MyXX.get('level')) %>
        <% }); %>
     </script>

But when I do this,

   <script type="text/template" id="Template"> 
        <% _.each(MyXX, function(MyXX) { %>
          <div> <%= MyXX.get('title') %> </div>
          <div> <%= MyXX.get('path') %> </div>
          <div> <%= MyXX.get('level') %></div>
        <% }); %>
     </script>

Nothing is displayed in my with the class on it from my BB code.

Glenn.

---

I have a backbone setup with PHP Slim, I have ask a number of questions at each stage of this, and now have more or less most of it working.

But my underscore template is not doing something right. I can access the 1st 'result' but anything deeper than that is comes back as undefined?

this is my template file,

  <script type="text/template" id="Template"> 
      <% _.each(MyCol, function(MyBB) { %>

      <%= console.log(MyCol.id) %>
      <%= console.log(MyCol.level) %>

      <% }); %>

  </script>

So this outputs the id form the model fine, but 'level' or anything else is just coming back as undefined? When I just output console.log(MyCol) all the models are displayed fine, selecting the attributes tag of the model, show all the data is being passed into my template, so where am I going wrong?

This is the BackBone view setup to load into the template,

var MyView = Backbone.View.extend({

  el: '.page',
  render: function() {
      var that = this;
      var MyCol = new CollectionSetOne();

       MyMenu.fetch({
        success: function(MyCol) {
            var temp = _.template( $('#MenuTemplate').html(), {MyCol: MyCol.models} );
            that.$el.html(menutemp);
            //return this;
        }
      });

  }
}); 

So where am I going wrong?

Most of this comes from the Backbone.js Tutorial on YouTube, https://www.youtube.com/watch?v=FZSjvWtUxYk

All help most welcome,

Glenn.

Answer 1

You have a couple problems here. The first is that you're referring to MyCol (the array of models you're iterating over) where you should be referring to MyBB (the specific model):

<script type="text/template" id="Template"> 
    <% _.each(MyCol, function(MyBB) { %>
        Use MyBB in here, not MyCol...
    <% }); %>
</script>

The next problem is that Backbone model attributes are the the same thing as JavaScript object properties. You refer to properties as:

obj.property

but attributes are stored in model.attributes and are accessed using get:

obj.get('attribute')

The id attribute is also stored in the the id property so model.id will work.

Your template should look more like this:

<script type="text/template" id="Template"> 
    <% _.each(MyCol, function(MyBB) { %>
        <% console.log(MyBB.id) %>
        <% console.log(MyBB.get('level')) %>
    <% }); %>
</script>

The usual convention (and possibly the source of your confusion) is to call toJSON to serialize the collection for the view:

var tmpl = _.template($('#MenuTemplate').html());
var html = tmpl({ MyCol: MyCol.toJSON() });
that.$el.html(html);

Then MyCol in your template would be a simple array of objects and you could say:

<% console.log(MyBB.id) %>
<% console.log(MyBB.level) %>