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

Question

嘿所以我有一个问题，我的模板改变，但骨干模型似乎并没有提供我需要的信息。我正在努力解决这个问题，所以我可以继续制作集合。我没有收到任何错误，我正在使用句柄，但也尝试了下划线的模板，问题不在于此，而在于信息显示。当我点击编辑并且编辑模板显示它未显示＃{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(); 
})(); 

玉文件

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, 

您试图直接分配骨干功能，您的看法。

而且这个问题是因为在该行中渲染方法..

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模板，但是变量是本地的渲染方法，而不是视图。所以你不能够访问它..

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

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

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