밑줄의 외부 템플릿
밑줄 템플릿을 사용 합니다. 외부 파일을 템플릿으로 첨부 할 수 있습니까?
백본보기에는 다음이 있습니다.
textTemplate: _.template( $('#practice-text-template').html() ),
initialize: function(){
this.words = new WordList;
this.index = 0;
this.render();
},
내 HTML에서 :
<script id="practice-text-template" type="text/template">
<h3>something code</h3>
</script>
잘 작동한다. 하지만 외부 템플릿이 필요합니다 . 나는 시도 :
<script id="practice-text-template" type="text/template" src="templates/tmp.js">
또는
textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),
또는
$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })
작동하지 않습니다.
편집 :이 답변은 오래되고 구식입니다. 삭제했지만 "허용 된"답변입니다. 대신 내 의견을 제시하겠습니다.
나는 이것을 더 이상 옹호하지 않을 것입니다. 대신 모든 템플릿을 HTML 파일로 분리합니다. 일부는 이것들을 적으로로드 할 제안 제안합니다 (Require.js 또는 일종의 템플릿 캐시). 그것은 작은 프로젝트에서 잘 작동하지만 템플릿이 많은 국립 프로젝트에서는 페이지로드에 대해 작은 요청을 많이 싫어합니다. (웃음 ... 좋아요, r.js로 초기 설정을 미리 확인하여 Require.js로 여전히 나에게 잘못 느리고니다)
grunt 작업 (grunt-contrib-jst)을 사용하여 모든 HTML 템플릿을 단일 templates.js 파일로 처리하고 수정합니다. 모든 세계 최고의 IMO ... 템플릿을 파일에 저장이 아닌 빌드 시간에 발생하며 페이지가 시작될 때 백 개의 작은 요청이 없습니다.
아래의 모든 쓰레기입니다
필자는 템플릿에 JS 파일을 포함하는 단순성을 선호합니다. 따라서 템플릿을 변수로 포함하는 view_template.js라는 파일을 만들 수 있습니다.
app.templates.view = " \
<h3>something code</h3> \
";
그런 다음 일반 파일처럼 펼쳐 파일을 포함시킨 다음보기에서 사용하는 것이 간단합니다.
template: _.template(app.templates.view)
한 걸음 더 나아가서 실제로 커피 펼치기 를 사용하여 코드가 다음과 같이 줄 끝 이스케이프 문자를 확장합니다.
app.templates.view = '''
<h3>something code</h3>
'''
이 접근 방식을 사용하면 require.js가 실제로 필요하지 않은 브레 이닝을 피할 수 있습니다.
간단한 해결은 다음과 가변합니다.
var rendered_html = render('mytemplate', {});
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/static/templates';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
dataType: 'html', //** Must add
async: false,
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}
여기에서 "async : false"를 사용하면 템플릿이로드 될 때까지 기다려야 나쁜 방법이 아닙니다.
"렌더링"기능
- 정적 디렉토리에서 별도의 HTML 파일로 각 템플릿을 사용할 수 있습니다.
- 매우 가볍습니다
- 템플릿 및 캐시
- 템플릿 로딩을 추상화합니다. 예를 들어, 나중에 미리로드되고 미리 준비된 템플릿을 사용할 수 있습니다.
- 사용하기
[중요 생각하기 때문에 의견을 남기지 않고 수정하고 있습니다.]
에 템플릿에 경우- 디스플레이가없는 경우에 응용 프로그램 , 볼은없는 HIERARCHY_REQUEST_ERROR: DOM Exception 3데이브 로빈슨을 오 파운더 정확히 수있는 것을 구석으로 "HIERARCHY_REQUEST_ERRR : DOM 예외 3"-를? .
기본적으로 추가해야합니다.
dataType: 'html'
$ .ajax 요청에.
인을이 믹스 사용하면 매우 간단한 방법으로 밑줄 를 사용하여 외부 템플릿을 렌더링 할 수 있습니다 _.templateFromUrl(url, [data], [settings]). 메소드 API는 Underscore의 _.template () 과 거의 동일 합니다. 캐싱 포함
_.mixin({templateFromUrl: function (url, data, settings) {
var templateHtml = "";
this.cache = this.cache || {};
if (this.cache[url]) {
templateHtml = this.cache[url];
} else {
$.ajax({
url: url,
method: "GET",
async: false,
success: function(data) {
templateHtml = data;
}
});
this.cache[url] = templateHtml;
}
return _.template(templateHtml, data, settings);
}});
용법 :
var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});
이 간단한 작업에 require.js를 사용하고 사고 수정 한 koorchik의 솔루션을 사용했습니다.
function require_template(templateName, cb) {
var template = $('#template_' + templateName);
if (template.length === 0) {
var tmpl_dir = './templates';
var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
contentType: 'text',
complete: function (data, text) {
tmpl_string = data.responseText;
$('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
if (typeof cb === 'function')
cb('tmpl_added');
}
});
} else {
callback('tmpl_already_exists');
}
}
require_template('a', function(resp) {
if (resp == 'tmpl_added' || 'tmpl_already_exists') {
// init your template 'a' rendering
}
});
require_template('b', function(resp) {
if (resp == 'tmpl_added' || 'tmpl_already_exists') {
// init your template 'b' rendering
}
});
템플릿을 자바 객체로 저장하지 않고 문서에 추가해야하는 이유는 무엇입니까? 더 많은 버전에서는 이미 모든 템플릿이 포함 된 html 파일을 생성하고 싶기 때문에 추가 아약스 요청을 할 필요가 없습니다. 그리고 동시에 코드를 리팩토링 할 필요가 없습니다.
this.template = _.template($('#template_name').html());
내 백본보기에서.
이 주제에서 약간의 벗어난 주문 수 있습니다 Grunt (http://gruntjs.com/)를 사용할 수 있습니다. 이 node.js (http://nodejs.org/, 모든 주요 플랫폼에서 사용 가능)에서 실행되어 명령 줄. 템플릿 컴파일러 https://npmjs.org/package/grunt-contrib-jst 와이 도구에 대한 많은 플러그인이 있습니다 . GitHub에 대한 문서, https://github.com/gruntjs/grunt-contrib-jst를 참조하십시오 . (그리고 노드 패키지 관리자 https://npmjs.org/ 를 실행하는 방법을 이해해야합니다 . 걱정하지 않고 안전하게 보호해야합니다.)
그런 다음 모든 템플릿을 별도의 html 파일에 보관하고 도구를 실행하여 밑줄을 사용하여 미리 선택할 수 있습니다. (JST에 대한 포함하고 있다고 생각하지만 걱정하지 않고 노드 패키지 관리자가 설치를 자동으로 설치합니다) .
이렇게하면 모든 템플릿이 하나의 펼쳐집니다.
templates.js
확장을로드하면 전역 (기본적으로 "JST")이 설정되고 이는 함수의 배열이며 다음과 같이 액세스 할 수 있습니다.
JST['templates/listView.html']()
안쪽 것
_.template( $('#selector-to-your-script-template'))
해당 펼쳐 태그의 내용을 (templates /) listView.html에 언급면
그러나 실제 키커는 다음과 가변적이다. ). 불만이있는 경우 다음을 입력하여 작업을 시작합니다.
grunt watch
명령 줄에서 그런트 파일에, 대한는 모든 변경 사항을 모니터링하고 위에서 설명한 JST 작업 과 같이 변경 사항이-sense되면 grunt.js 파일에서 설정 한 모든 작업을 자동 실행합니다 . 파일을 편집 한 다음 저장하면 모든 템플릿이 여러 디렉토리 및 하위 디렉토리에 분산되어 있더라도 하나의 js 파일로 다시 저장됩니다.
자바 펼쳐 linting, 테스트 실행, 펼쳐보기 파일 연결 및 축소 / 추적을 위해 작업을 구성 할 수 있습니다. 그리고 모두 감시 작업에 연결될 수 있으므로 파일을 변경하면 프로젝트의 새로운 '빌드'가 자동으로 트리거됩니다.
설정하고 grunt.js 파일을 구성하는 방법을 이해하는 데 약간의 시간이 걸리지 만, 투자 한 시간을 충분히 투자 할 가치가 있고 사전 작업 방식으로 돌아 가지 않을 생각합니다.
이것이 당신에게 도움이 될 것이라고 생각 합니다. 솔루션의 모든 것은 require.jsJavaScript 파일 및 모듈 로더 인 라이브러리를 중심으로 처리 합니다.
위 링크의 튜토리얼은 백본 프로젝트를 구성하는 방법을 매우 잘 보여줍니다. 샘플 구현이 또한 제공된다. 도움이 되셨기를 바랍니다.
나는 자바 펼쳐 템플릿에 관심이 이제 백본으로 첫 걸음을 내딛고 있습니다. 이것은 내가 생각 해낸 꽤 잘 작동하는 것입니다.
window.App = {
get : function(url) {
var data = "<h1> failed to load url : " + url + "</h1>";
$.ajax({
async: false,
url: url,
success: function(response) {
data = response;
}
});
return data;
}
}
App.ChromeView = Backbone.View.extend({
template: _.template( App.get("tpl/chrome.html") ),
render: function () {
$(this.el).html(this.template());
return this;
},
});
App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();
데이터 유형을 "텍스트"로 설정해야 작동합니다.
get : function(url) {
var data = "<h1> failed to load url : " + url + "</h1>";
$.ajax({
async: false,
dataType: "text",
url: url,
success: function(response) {
data = response;
}
});
return data;
}
jQuery를 사용하여 저에게 제품 솔루션을 찾았습니다.
jQuery.load () 메소드와 함께 밑줄 템플릿 코드를 기본 html 파일에 추가합니다.
일단 거기에 있으면 템플릿을 생성하는 데 사용합니다. 모두 동시에 발생해야합니다!
개념은 다음과 가변합니다.
밑줄지도 템플릿 코드가 있습니다.
<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
<% _.each(rc, function(rowItem, index){ %>
<ul class="map-row" data-row="<%- index %>">
<li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
...
</script>
이 코드를 map-template.html 이라는 파일에 넣습니다.
그 후 템플릿 파일에 대한 래퍼를 만듭니다.
<div id="templatesPool"></div>
그런 다음 해당 파일을 주 HTML 파일에 포함합니다.
머리에서 :
<!-- Template Loader -->
<script>
$(function(){
$("#templatesPool").append($('<div>').load("map-template.html"));
});
</script>
건배.
나는이 질문이 정말 오래 예는 것을 알고 있습니다 밑줄 ajax 템플릿에 대한 Google 검색의 첫 번째 결과로 전달습니다.
나는 이것에 대한 좋은 해결책을 찾지 못해서 지쳐서 내 자신을 만들었습니다.
https://github.com/ziad-saab/underscore-async-templates
AJAX를 사용하여 밑줄 템플릿을로드하는 것 외에도 <% include %> 기능을 추가합니다. 누군가에게 유용 할 수 있기를 바랍니다.
jQuery가 동기식으로 작동하도록하는 것이 조금 불편 때문에 promise를 사용하여 이전 동기식 예제를 수정했습니다. 거의 동일하지만 모두 실행됩니다. 이 예제에서는 hbs 템플릿을 사용하고 있습니다.
var asyncRenderHbs= function(template_name, template_data) {
if (!asyncRenderHbs.template_cache) {
asyncRenderHbs.template_cache= {};
}
var promise= undefined;
if (!asyncRenderHbs.template_cache[template_name]) {
promise= new Promise(function(resolve, reject) {
var template_url= '/templates/' + template_name;
$.ajax({
url: template_url,
method: 'GET',
success: function(data) {
asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
resolve(asyncRenderHbs.template_cache[template_name](template_data));
},
error: function(err, message) {
reject(err);
}
});
});
} else {
promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
}
return promise;
};
그런 다음 사용 된 html을 사용하려는 경우 :
asyncRenderHbs('some_template.hbs', context)
.then(function(html) {
applicationMain.append(html);
// Do other stuff here after html is rendered...
})
.catch(function(err) {
// Handle errors
});
참고 : 다른 사람들이 설명했듯이 모든 템플릿을 하나의 templates.js 파일로 만들 때 템플릿을 가져 오기 위해 많은 작은 동기 AJAX 호출을 사용하는 것이 좋습니다.
프론트 경고-여기 드래곤이 있습니다 :
ASP.NET 스택 (및 프레임 워크)이 js-libs는 에코 시스템과 조화롭게 작동하도록하기 위해 아래에 접근 방식을 간략하게 나타냅니다. 이것은 일반적인 솔루션이 아니라는 말 말할 필요도 없습니다. 라고 한 ...
/ endforwardwarning
ASP.NET을 사용하는 경우 템플릿을 하나 이상의 부분적 복제 배치하기 만하면 템플릿을 외부화 할 수 있습니다. .cshtml 내부 :
@Html.Partial("path/to/template")
template.cshtml 내부 :
// this is razorview and thusly if you ever need to use the @ character in here
// you will have to either escape it as @@ or use the html codepoint which is @
// http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
<script type="text/x-template" id="someId">
<span class="foo"><%= name %></span>
</script>
이제 사용할 수있는 템플릿을 사용할 수 있습니다.
_.template($("#someId").html())({ name: "Foobar" });
이 이해하기 어려운 접근 방식이 누군가가 한 시간 분량의 머리를 긁는 데 도움이되기를 바랍니다.
참고 URL : https://stackoverflow.com/questions/8366733/external-template-in-underscore
'IT' 카테고리의 다른 글
| Chrome이 XMLHttpRequest를 사용하여 로컬 파일에서 URL을로드하도록 허용 (0) | 2020.07.14 |
|---|---|
| 검색 결과에서 폴더 무시 (0) | 2020.07.14 |
| 이미에서 메모리 해제 (0) | 2020.07.13 |
| jQuery로 요소 이름을 어떻게 얻을 수 있습니까? (0) | 2020.07.13 |
| 일급 기능과 고차 기능의 차이점 (0) | 2020.07.13 |