javascript - Why is my view in backbone not rendering? -

i trying render template backbone views not working? know doing wrong here thanks! include jade file views , main.js file backbone js script.

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 

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() {              user.on('invalid', function (model, invalid) {                 console.log(invalid);             });         }      });        //view     app.views.user = backbone.view.extend({         model: app.models.user,         //tagname: 'div',         //id: 'user',         //classname: 'userprofile',         template: _.template($("#usertemplate").html());         edittemplate: _.template($("#useredittemplate").html());           initialize: function (){          }          render: function() {             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({el: 'div #user'});     user.render(); })();  

i found didn't assign backbone view model.

so try this:

      var mymodel = backbone.model.extend({         defaults: {             name: 'first',             lastname: 'last',             email: 'email',             phone: '222',             birthday: 'date'         }     });      var myview = backbone.view.extend({         el: "#user",         model: mymodel,         template: _.template($("#test-template").html()),         render: function(){             this.$el.html(this.template(this.model.tojson()));             return this;         }     });      var myview = new myview({model:new mymodel()});     myview.render(); 

and test-template is:

<script id="test-template" type="text/template">    <div><%=name%></div> </script> 

html:

<body> <div id="user"> </div> </body> 

you can define backbone view's el attribute in backbone view declaration. , remember assign view model when initiate it.

[edit]

jade:

script(id="usertemplate", type ="text/template")             p #{firstname} #{lastname}             p #{email}             p #{phone}             p #{birthday}             button.edit edit 

modify template generation method:

<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script> <script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>  template: jade.compile($("#usertemplate").text()); 

hope helpful you.