Error when implementing template in underscore js and backbone je

Question

I am having some issues getting started with using underscore js and backbone js together. I am able to display just plain html with backbone but i am not able to get the templates to display.

Template:

<script type="text/template" id="edit-user-template">
        <form class="edit-user-form">
            <legend>Create User</legend>
            <label>First Name</label>
            <input type="text" name="firstname" />
            <label>Last Name</label>
            <input type="text" name="lastname" />
            <label>Age</label>
            <input type="text" name="age" />
            <hr />
            <button type="submit" class="btn">Create a User</button>
        </form>
</script>

View:

var EditUser = Backbone.View.extend({
                el: '.page',
                template: _.template($('#edit-user-template').html),                
                render: function() {    
                this.$el.html(this.template({}));
                return this;
                }
            });

Route:

var Router = Backbone.Router.extend({
                routes:{
                    '':'home',
                    'new':'editUser'
                }
            });

            var userList = new UserList();
            var editUser = new EditUser();

            var router = new Router();
            router.on('route:home', function(){
                userList.render();
            });
            router.on('route:editUser', function(){
                editUser.render();
            });
            Backbone.history.start();

When i try to load the page in the browser i get the error:

Uncaught TypeError: Object function (e){return b.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!b.support.htmlSerialize&&mt.test(e)||!b.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(b.cleanData(Ot(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)} has no method 'replace' underscore-min.js:1

Any idea what is causing this?

jevakallio jevakallio · Accepted Answer · 2013-02-23T15:17:04

jQuery.html() is a method, so instead of this:

template: _.template($('#edit-user-template').html)

You need

template: _.template($('#edit-user-template').html())

Error when implementing template in underscore js and backbone je

1 Answers