My Backbone / Underscore template issue?

Question

ok, I have post a number of questions about this and got most of this working but I am not sure about a something I am doing, so I thought it would be easy and cleaner to just post my issues in a new question, with a complete copy of my code.

So my aim, I have my menu inside my database, the menu title, path and a level with an id field as the primary key. Then I have a PHP class that builds this within a 'nav' tag in a list. This all works without any problems. Now the level is set from 1 to 5, and the select SQL command builds the menu by ordering with that level.

The goal in mind for this, is for a form to hold all this data, then using HTML5 drag and drop and would be able to change the level set in the database.

So what I am currently trying to do is to get BackBone to load that data into an underscore template. This is where I am having a few issues.

So my BackBone code,

var AdminColModel = Backbone.Collection.extend({
     url: '/GetMenu'
});

var AdminEditMenu = Backbone.View.extend({
el: '.page',
render: function() {
    var that = this;
    var MyMenu = new AdminColModel();

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

}
}); 

$(document).ready(function(){  
   var MyMenu = new AdminEditMenu();
   MyMenu.render();  
});

The Path /GetMenu returns, I am using PHP Slim here to do this, the menu database information in a JSON format.

This is my Underscore code,

<script type="text/template" id="MenuTemplate"> 

   <% _.each(MyMenu, function(MyMenu) { %>

        <%= $('.page').append(MyMenu.id) %>
        <%= $('.page').append(MyMenu.title) %>
        <%= $('.page').append(MyMenu.path) %>
    <%= $('.page').append(MyMenu.level) %>
    <%= $('.page').append('<br/><br/>') %>

   <% }); %>

</script>

Now my BackBone points to a '.page' class which I echo out in a div tag above the code this tempalte, so that, form what I know, the class is in the DOM before the template, I think that is right.

I am also using Grunt to minify all my backbone / JQuery code, which loads just before I close my body tag.

Now this does work, but from a youtube video I watch, the guy just coded in a table within the underscore template, which then loaded. If I load anything in the template, is dose NOT show up, the JQuery .appends that I have added to my JSON data is the only way I found I could print / echo that data into my page. I do not think this is right and I know I must be doing something wrong.

I have not posted any of my PHP code as I did not think it was needed, this all works and there does not seem to be any issue with that side of my code.

All help or comments most welcome.

Glenn.

on a side note: change that.$el.html(that.menutemp ); to that.$el.html( menutemp );. Since menutemp is a local variable, therefore that is not required with it. — Zain Shaikh
Usually <%= $('.page').append(MyMenu.id) %> would be more like <%= MyMenu.id %>, then the template produces a hunk of text/html that the view would toss in the page somewhere. — mu is too short
@mu-is-too-short - That is my issue, if I do just <%= MyMenu.id %>, it will not display anything at all. It does not make an difference what I put in there, it will not display / render anything. I have try 'div' tags, tables, section tags, but nothing is displaying. Am I doing something wrong? Or is what I am doing ok? Thanks glenn — Glenn Curtis
Its Ok, I got it to work. When I did what Zain said, it worked. @zain-shaikh, if you post that as an answer, I accept it. Thanks Glenn. — Glenn Curtis

Zain Shaikh Zain Shaikh · Accepted Answer · 2014-04-13T08:52:26

Change that.$el.html(that.menutemp ); to that.$el.html( menutemp );.

Since menutemp is a local variable, therefore that is not required with it.

My Backbone / Underscore template issue?

1 Answers