Backbone.js는 HTML 파일에서 템플릿을 분리합니다.

Question

저는 Backbone.js 응용 프로그램을 만들고 있습니다. underscore.js 템플릿을 사용하여 내용을보기로로드합니다. 현재 우리는 index.html 파일 안에 모든 템플릿을 가지고 있으므로 파일 크기가 커지고 있습니다. 이 템플릿을 다른 파일로 분리하는 솔루션을 찾는 사람이 있습니까? 미리 감사드립니다.

편집 최근에 나는 Backbone patterns 방문하고 난 우리가 각각의 템플릿에 대해 별도의 템플릿 파일을 만들 JST templates를 사용할 수 있다는 것을 발견했다.

// http://myapp.com/javascripts/jst.js window.JST = {}; window.JST['person/contact'] = _.template( "<div class='contact'><%= name %> ..." ); window.JST['person/edit'] = _.template( "<form method='post'><input type..." ); <script src="http://myapp.com/javascripts/jst.js"></script> 

는 이제 모든 템플릿은 jst.js 파일에 있습니다 : 그들은 우리가 우리의 모든 템플릿 코드를 넣어 jst.js 파일을 만들 수 있습니다 설명했다. 당신이 템플릿을 많이 가지고 있고 별도의 템플릿 파일을 만들 수 있습니다 파일을 별도의 템플릿을 이동 싶은 경우 :

// http://myapp.com/javascripts/jst.js 
window.JST = {}; 

//http://myapp.com/javascripts/contactPerson.template.js 
window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..." 
); 

//http://myapp.com/javascripts/editPerson.template.js 
window.JST['person/edit'] = _.template(
    "<form method='post'><input type..." 
); 

<script src="http://myapp.com/javascripts/jst.js"></script> 
<script src="http://myapp.com/javascripts/contactPerson.js"></script> 
<script src="http://myapp.com/javascripts/editPerson.js"></script> 

는 간단한 아이디어가 있으면 알려 주시기 바랍니다. 감사!

Answer 1

템플릿을 별도의 HTML 파일로 만들 수 있으며 requirejs을 사용하여 텍스트로로드 할 수 있습니다. 플러그인을 사용하면 도움이 될 text 플러그인이 있습니다.

예 :

define([ 
    'text!templates/sampleTemplate.html' 
], function(tmpl){ 

    var Sampleview = Backbone.View.extend({ 
     id: 'sample-page', 

     template: _.template(tmpl), 

     render: function() { 
     $(this.el).html(this.template()); 
     return this; 
    } 
    }); 
    return SampleView; 
}); 

HTML 파일 "템플릿/sampleTemplate.html은"다음

Answer 2

xhr을 통해로드하십시오. lib requirejs (requirejs.org)는 이러한 방식으로 html 파일 종속성을로드합니다. 개발 중에는 작동하지만 템플릿은 프로덕션 환경의 js 파일로 컴파일해야합니다.