여러 템플릿 렌더링

Question

지금 백본 및 언더 코어를 배우고 있으며 모의 이메일 응용 프로그램을 조금 만들고 있습니다.

나는 JSON 전자 메일 모음을 내보기에 전달하여 정렬되지 않은 목록에 표시했습니다. 내가 원하는 것은 항목을 클릭하고 전자 메일의 내용을 표시하는 목록 옆에 렌더링 된 별도의 서식 파일을 갖는 것입니다.

코드 내보기에서 니펫을 :

html로 템플릿 :

<div> 
    <h1>Backbone test data bind to view</h1> 
    <hr/> 
    <div class="page"> 
    </div> 
    <div class="content"> 
    </div> 
</div> 

<script type="text/template" id="email-list-template-styled">  
<div class="tab"> 
    <ul> 
     <@ _.each(emails, function(email){ @> 
      <a class="tablinks" data-id="<@= email.get('id') @>" href="backbone" > 
       <td> From: <@= email.get('sender') @> </td> </br> 
       <td> To: <@= email.get('recipient') @> </td> </br> 
       <td> Date: <@= email.get('dateSent') @> </td> </br> 
      </a> 
     <@ }) @> 
    </ul> 
</div> 
</script> 

<script type="text/template" id="email-content"> 
    <div id="emailContent" class="tabcontent"> 
     <h3>From: sender</h3> 
     <h3>To: recipient</h3> 
     <h3>Subject: subject</h3> 
     <h3>Date: dateSent</h3> 
     <p>message</p> 
    </div> 
</script> 

자바 스크립트 :

<script type="text/javascript"> 
var EmailsList = Backbone.Collection.extend({ 
    url : 'backbone/getEmails.html' 
}); 

var Email = Backbone.Model.extend({}); 

var EmailList = Backbone.View.extend({ 
    el: '.page', 
    events: { 
     'click' : 'showAlert' 

     }, 
     showAlert: function(e){ 
      e.preventDefault(); 
      var that = this; 
      var id = $(event.target).data('id'); 
      var Email = Backbone.Model.extend({ 
       url: 'backbone/getEmail/' + id 
      }); 

      var email = new Email(); 
      email.fetch({ 
       success: function(email){ 
        console.log(email.toJSON()); 
        var template = _.template($('#email-content').html(), {email: email.models}); 
        that.$el.append(template); 
       } 
      }) 
     }, 

    render: function(){ 
     var that = this; 
     var emails = new EmailsList(); 
     emails.fetch({ 
      success : function(emails) { 
       console.log(emails.toJSON()); 
       var template = _.template($('#email-list-template-styled').html(), {emails: emails.models}); 
       that.$el.html(template); 
      } 
     }) 
    } 
}); 

var emailList = new EmailList(); 

var Router = Backbone.Router.extend({ 
    routes:{ 
     '': 'backbone' 
    } 
}) 

var router = new Router(); 
router.on('route:backbone', function(){ 
    emailList.render(); 
}); 

Backbone.history.start(); 
</script> 

단일 객체 데이터 예 :

dateSent:"2017-03-21 08:36" 
id:3 
message:"Message3" 
recipient:"Recipient3" 
sender:"Sender3" 
subject:"Subject3" 

지금까지를 그럭저럭 클릭 이벤트를 클릭하는 이메일의 ID입니다. 단일 전자 메일 개체 (정확한 전자 메일 JSON)를 전달하는 템플릿을 렌더링 할 때보 다 여러 인스턴스를 생성하고 email-content 템플릿에 인쇄 된 변수를 얻는 순간 템플릿을 추가하고 있습니다. 오류가 발생합니다 : 그래서 질문이 될 것

<h3>From: sender <@= email.get('sender') @></h3> 

:

가 어떻게

가 어떻게에서 이메일 변수에 액세스 할 컨텐츠 템플릿을 렌더링 다시 할 수 Uncaught TypeError: Cannot read property 'get' of undefined을 내가 좋아하는 뭔가를 입력 할 때 콘텐츠 템플릿?

Answer 1

귀하의 코드는 다음 즉, 새로운 구문을 문제 사용의 새로운 버전을 사용하는 경우, 오래된 underscore.js 버전의 구문을 사용하고 있습니다 :

var template = _.template($('#email-content').html(), {email: email.models}); 

:

var template = _.template(templateString); 
template(data); 

과 아래 라인에

이메일은 컬렉션이 아니라 모델입니다.

그래서 코드는 다음과 같아야합니다

var template = _.template($('#email-content').html(), {email: email}); 

이제 <h3>From: sender <@= email.get('sender') @></h3>을 할 수있을 것입니다.

var template = _.template($('#email-content').html(), {email: email.toJSON()}); 

을 그냥 원래 모달 영향을주지 않도록 템플릿 물건을 만들기 위해 같은 <h3>From: sender <@= email.sender @></h3> 렌더링 :

나는 일을하는 것이 좋습니다.

---

또한, 당신은 대신

var Email = Backbone.Model.extend({ 
    urlRoot: 'backbone/getEmail/' 
}); 

처럼 모델을 정의하는 이벤트 핸들러

var Email = Backbone.Model.extend({ 
    url: 'backbone/getEmail/' + id 
}); 

에 모달 생성자를 정의하고 모델에 id을 설정하지 않아야합니다. 백본은 id을 url에 붙입니다. 컬렉션에 {model: Email}을 통과하고 새로운 모델 인스턴스를 IMO을 할 수있는 적절한 방법을 때마다, 만드는 것보다 get() 방법의 사용 컬렉션에서 일치하는 모델을 찾을 경우 urlRoot 설정

필요가 없습니다.

다른 제안 :

• 이메일의 상세보기에 대해 별도의 뷰를 정의
• 는
• 업그레이드 underscore.js의 새 버전으로 백본에 익숙하고 템플릿을 캐시하면 el 속성을 사용하지 마십시오 보기의 template 속성의 함수
• 이벤트 수신 대기자를 'click' : 'showAlert'과 같이 더 구체적으로 'click .email' : 'showAlert'과 같이 설정하십시오. 그렇지 않으면보기의 아무 곳이나 클릭하면 처리기가 트리거됩니다. 데이터가 id 인 실제 이메일이 아닌 요소 (예 : 드롭 다운 등)를 클릭하면 버그가 발생합니다.