骨干模型不是呈现默认？ 需要玉和骨干大师

嘿所以我有一个问题，我的模板改变，但骨干模型似乎并没有提供我所需要的信息。 我试图解决这个问题，所以我可以继续收集。 我没有得到任何错误，我正在使用句柄，但也尝试了下划线的模板以及问题不在于那里，但对信息显示。 当我点击编辑和编辑模板显示它显示未定义的＃{firstName}和其他人。

Main.js文件

(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 a real first name.'; } if (!attrs.lastName) { return 'You must enter a real last name.'; } if (attrs.email.length < 5) { return 'You must enter a real email.'; } if (attrs.phone.length < 10 && attrs.phone === int) { return 'You must enter a real phone number, if you did please remove the dash and spaces.'; } if (attrs.city.length < 2) { return 'You must enter a 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文件

 extends layout block content div.centerContent h4 User goes here with equal before it 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") 

Answer 1

尝试从您的视图中删除这一行

 model: App.Models.User, 

您正试图直接将Backbone函数分配给您的视图。

此外，问题是因为你的渲染方法中的这一行。

 render: function() { var template = Handlebars.compile($("#userTemplate").html()); var editTemplate = Handlebars.compile($("#userEditTemplate").html()); 

editemplate是render方法的本地，而在其他方法中不可用。

 editProfile: function () { this.$el.html(this.editTemplate(this.model.toJSON())); }, 

你正在尝试使用this.editTemplate访问模板，但variables是本地的渲染方法，而不是视图..所以你无法访问它..

而不是在本地范围内创build它，而是将其自我实例化为视图，以便在视图的其他方法中可用。

 render: function() { this.template = Handlebars.compile($("#userTemplate").html()); this.editTemplate = Handlebars.compile($("#userEditTemplate").html()); 

那么它应该可用于其他方法，以及在相同的看法。