javascript - What is wrong with the handlebar code? -

hey trying switch underscore handlebar, nothing rendering model, templates changing correctly. also, when edittemplate shows clicking edit button #{firstname} , others show undefined.

in layout jade file include appropriate files, jquery, underscore,backbone , handlebar.

here main.js file

(function () {     window.app = {         models: {},         collections: {},         views: {},        // templates: {},         router: {}      };      // model     app.models.user = backbone.model.extend({         defaults: {             firstname: 'first',             lastname: 'last',             email: 'email',             phone: '222',             birthday: 'date'         },          validate: function (attrs) {             if (!attrs.firstname) {                 return 'you must enter real first name.';             }             if (!attrs.lastname) {                 return 'you must enter real last name.';             }             if (attrs.email.length < 5) {                 return 'you must enter real email.';             }             if (attrs.phone.length < 10 && attrs.phone === int) {                 return 'you must enter real phone number, if did please remove dash , spaces.';             }             if (attrs.city.length < 2) {                 return 'you must enter real city.';             }         },          initialize: function() {              this.on('invalid', function (model, invalid) {                 console.log(invalid);             });         }      });        //view     app.views.user = backbone.view.extend({         model: app.models.user,         el: 'user',         //tagname: 'div',         //id: 'user',         //classname: 'userprofile',           initialize: function (){          },          render: function() {             var template = handlebars.compile($("#usertemplate").html());             var edittemplate = handlebars.compile($("#useredittemplate").html());              this.$el.html(this.template(this.model.tojson()));             return this;         },          events: {             'click button.edit': 'editprofile',         //  'click button.save': 'saveedits',             'click button.cancel': 'canceledits'         },          editprofile: function () {             this.$el.html(this.edittemplate(this.model.tojson()));          },            canceledits: function() {             this.render();         }      });     //start history service     backbone.history.start();      var user = new app.views.user({model: new app.models.user()});     user.render(); })(); 

here jade file

extends layout block content        div.centercontent         script(type="text/javascript", src="/js/main.js")          h4 user goes here equal before no space             div#user                 p #{firstname} #{lastname}                 p #{email}                 p #{phone}                 p #{birthday}                 button.edit edit            script(id="usertemplate", type ="text/template")                 p #{firstname} #{lastname}                 p #{email}                 p #{phone}                 p #{birthday}                 button.edit edit          script(id="useredittemplate", type ="text/template")             div                 form(action="#")                     input(type="text", class="firstname", value=#{firstname}) input(type="text", class="lastname", value=#{lastname})                     input(type="email", class="email", value=#{email})                     input(type="number", class="phone", value=#{phone})                     input(type="date", class="birthday", value=#{birthday})                 button.save save                 button.cancel cancel         hr 

layout jade file

doctype 5 html     head         title=title         link(rel='stylesheet', href='/css/style.css', type='text/css')         link(rel='stylesheet', href='/css/bootstrap-responsive.css')         link(href='/css/bootstrap.css', rel='stylesheet', type='text/css')         link(href='/css/font-awesome.min.css', rel='stylesheet', type='text/css')         script(src='/js/jquery.min.js', type='text/javascript')         script(src='/js/jquery.validate.min.js', type='text/javascript')         script(src='/js/script.js', type='text/javascript')         script(src='/js/underscore.min.js', type='text/javascript')         script(src='/js/backbone.min.js', type='text/javascript')         script(src='/js/handlebars.js', type='text/javascript')     body         div#container             div#header             block content              include footer 

if wanted see answer, mistake of calling this

#{firstname} 

instead of correct usage being:

{{firstname}}