2013-07-11 2 views
3

안녕하세요, 밑줄에서 핸들 바로 전환하려고하고 있지만 모델에서 렌더링되는 것이 없지만 템플릿이 올바르게 변경되고 있습니다. 또한 editTemplate이 편집 버튼을 클릭했을 때 표시되면 # {firstName}이 (가) 정의되지 않은 것으로 표시됩니다.핸들 바 코드에 어떤 문제가 있습니까?

내 레이아웃 옥 파일에는 적절한 파일, 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

자바 스크립트가 DOM이 구축되기 전에 페이지의 머리에 가져 오면, 템플릿에 이러한 참조는 만족하지 않습니다. – Pointy

+0

맨 아래에로드 할 스크립트 main.js 파일을 옮겼습니다. 이제 렌더링이되지 않지만 오류는 표시되지 않습니까? – Lion789

+0

'el : 'user''는 당신이 생각하는 것을 의미하지 않는다. 그 셀렉터는' '요소를 찾고있을 것이다. ... –

답변

0

사람이 답을보고 싶어하는 경우가 있었다 기본적으로 이것을 부르는 실수는

대신에 올바른 사용 존재의

:

{{firstName}} 
관련 문제