2013-07-11 57 views
3

嘿所以我想從下劃線切換到車把,但沒有任何模型渲染,但模板正在改變。另外,當editTemplate通過單擊編輯按鈕顯示時,#{firstName}等顯示爲未定義。手柄代碼有什麼問題?

在我的佈局jade文件中,我包含了所有相應的文件,jquery,下劃線,主幹和車把。

這是我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({ 
     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(); 
})(); 

這裏是我的玉文件

extends layout 
block content 
    div.centerContent 
     script(type="text/javascript", src="/js/main.js") 

     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} 
       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 

佈局玉文件

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 
+0

如果你的JavaScript在DOM建造之前的頁面的進口機頭,到模板中的這些引用都不會滿意。 – Pointy

+0

我將腳本main.js文件移動到底部加載,現在只是不呈現,但我沒有看到任何錯誤? – Lion789

+0

'el:'用戶'並不意味着你的想法,那個選擇器會尋找一個''元素... –

回答

0

如果任何人希望看到的答案,這是基本上是調用這個錯誤

#{firstName} 

,而正確的使用感:

{{firstName}}