hey having problem templates change backbone model not seem provide info need. trying solve can move on making collections. not getting errors , using handlebars have tried underscore's templating , problem doesn't lie there against info displaying. when click edit , edit template shows showing undefined #{firstname} , others.
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({ el: '#user', //model: usermodel, //tagname: 'div', //id: 'user', //classname: 'userprofile', //template: _.template($("#usertemplate").html()), //edittemplate: _.template($("#useredittemplate").html()), initialize: function (){ }, render: function() { this.template = handlebars.compile($("#usertemplate").html()); this.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())); }, //saveedits: function (e) { // e.preventdefault(); // var formdata = {}, // prev = this.model.previousattributes(); // //get form data // $(e.target).closest('form').find(':input').not('button').each(function(){ // var el = $(this); // formdata[el.attr('class')] = el.val(); // }); //update model // this.model.set(formdata); //render view // this.render(); //update array //}, canceledits: function() { this.render(); } }); //start history service backbone.history.start(); var user = new app.views.user({model: new app.models.user()}); user.render(); })(); jade file
extends layout block content div.centercontent 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} 1 p #{email} 2 p #{phone} 3 p #{birthday} 4 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 script(type="text/javascript", src="/js/main.js")
try removing line view
model: app.models.user, you trying assign backbone function directly view.
also problem because of line in render method..
render: function() { var template = handlebars.compile($("#usertemplate").html()); var edittemplate = handlebars.compile($("#useredittemplate").html()); the editemplate local render method , not available in other methods.
editprofile: function () { this.$el.html(this.edittemplate(this.model.tojson())); }, you trying access template using this.edittemplate , variable local render method , not view.. not able access it..
instead of creating in local scope, instantiate view self available in other methods of view.
render: function() { this.template = handlebars.compile($("#usertemplate").html()); this.edittemplate = handlebars.compile($("#useredittemplate").html()); then should available other methods in same view.
Comments
Post a Comment