밑줄 템플릿과 다른 HTML 파일을 바인딩하는 방법은 무엇입니까?

Question

나는 내 html 파일을 사용할 때 밑줄 템플릿 인수를 전달할 수 없다거나 backbone.js를 사용할 때 잘못된 방법을 사용한다고 생각합니다.

내 문제를 설명하기 전에 내 전체 소스를 참조하십시오.

router.js

listRoute: function() { 
    var url = Backbone.history.getFragment(); 
    var view = {}; 
    var listData = {}; 
    var lists = {}; 
    var target = 'list'; 
    switch (url) { 
     case 'list/1': 
     listData = [{ 
      id : "1", 
      url : "/assets/videos/call/MOV01718.mp4", 
      imgSrc : "assets/img/call/1_thumbnail.png", 
      title: "call situation conservation" 
     }, 
     { 
      id : "2", 
      url : "/assets/videos/call/MOV01722.mp4", 
      imgSrc : "assets/img/call/2_thumbnail.png", 
      title: "call situation conservation" 
     }, 
     { 
      id : "3", 
      url : "/assets/videos/call/MOV01724.mp4", 
      imgSrc : "assets/img/call/2_thumbnail.png", 
      title: "call situation conservation" 
     }]; 
     lists = new this.collection(); 
     lists.add(listData); 
     view = new views.list({collection:lists}); 
     this.layout.setContent(view, target); 
     break; 

view.js

var content = this.content; 
    var pageSelect = this.target; 
    var subUrl = this.url; 
    if (content) content.remove(); 
    content = this.content = paramCount[0]; 
    pageSelect = this.target = paramCount[1]; 
    subUrl = this.url = paramCount[2]; 
    var templateName = subUrl; 
    var tmpl_dir = '../assets/static'; 
    var tmpl_url = tmpl_dir + '/' + templateName + '.html'; 
    var tmpl_string = ''; 

    $.ajax({ 
     url: tmpl_url, 
     method: 'GET', 
     async: false, 
     dataType : 'html', 
     success: function (data) { 
     tmpl_string = data; 
    } 
}); 
this.$content.html(content.render(tmpl_string).el); 

views.list = Backbone.View.extend({ 
    render: function(templateName) { 
     var template = _.template(templateName); 
     this.$el.html(template({result : this.collection.models})); 
     return this; 
    } 
}); 

list.html은

<script type="text/template" id="list-template"> 
    <div id="columns"> 
    <% _.each(result, function(result){ %> 
    <div id="<% result.get('id') %>" class="content"> 
     <a href="<% result.get('url') %>"> 
     <figure> 
      <img src="<% result.get('imgSrc') %>"> 
      <figcaption><% result.get('title') %></figcaption> 
     </figure> 
    </div> 
    <% }); %> 
    </div> 
</script> 

나는 전자의 숫자를 보았다 이 문제와 관련된 예제. 모델 및 컬렉션 생성에는 문제가 없다고 생각하지만이 문제는 Underscore Template id 및 렌더링 함수를 바인딩 할 수 없기 때문에 발생한다고 생각합니다. 예를 들어

,

내가로드 한 후 AJAX와, 외부 HTML 파일을 사용하지만, 내가 템플릿 ID와 외부 파일 이름을 바인딩하는 방법을 모르는 this.template = _.template($('#list-template').html());?

내 페이지가 오류를 인쇄하지 않으므로 더 이상 알지 못합니다.

미리 감사드립니다. 외부 파일에서로드 할 때

Answer 1

이 list.html에서 <script> 태그를 제거가 필요하지 않은, HTML 파일은 다음과 같아야합니다

<div id="columns"> 
<% _.each(result, function(result){ %> 
<div id="<% result.get('id') %>" class="content"> 
    <a href="<% result.get('url') %>"> 
    <figure> 
     <img src="<% result.get('imgSrc') %>"> 
     <figcaption><% result.get('title') %></figcaption> 
    </figure> 
</div> 
<% }); %> 
</div>