[javascript] 밑줄의 외부 템플릿

Program / 글쓴이

나는 밑줄 템플릿을 사용 합니다. 외부 파일을 템플릿 으로 첨부 할 수 있습니까?

Backbone View에는 다음이 있습니다.

 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 또는 일종의 템플릿 캐시). 작은 프로젝트에서는 잘 작동하지만 템플릿이 많은 대규모 프로젝트에서는 페이지로드시 내가 정말 싫어하는 작은 비동기 요청을 많이하는 경우가 있습니다. (ugh … 좋아, r.js로 초기 종속성을 미리 컴파일하여 Require.js로 해결할 수 있지만 템플릿의 경우 여전히 나에게 잘못된 느낌)

저는 grunt 작업 (grunt-contrib-jst)을 사용하여 모든 HTML 템플릿을 하나의 templates.js 파일로 컴파일하고 포함하는 것을 좋아합니다. 모든 세계의 최고 IMO … 템플릿은 파일에 살고, 해당 템플릿의 컴파일은 런타임이 아닌 빌드 타임에 발생하며 페이지가 시작될 때 100 개의 작은 비동기 요청이 없습니다.

아래의 모든 것은 쓰레기입니다

저에게는 템플릿에 JS 파일을 포함하는 단순함을 선호합니다. 따라서 템플릿을 변수로 포함하는 view_template.js라는 파일을 만들 수 있습니다.

app.templates.view = " \
    <h3>something code</h3> \
";

그런 다음 일반 파일과 같이 스크립트 파일을 포함하고보기에서 사용하는 것처럼 간단합니다.

template: _.template(app.templates.view)

한 단계 더 나아가 실제로 coffeescript를 사용하므로 코드가 실제로 다음과 같이 보이고 줄 끝 이스케이프 문자를 피합니다.

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”를 사용하는 것은 어떤 경우에도 템플릿이로드 될 때까지 기다려야하기 때문에 나쁜 방법이 아닙니다.

따라서 “렌더링”기능

  1. 각 템플릿을 정적 디렉토리에 별도의 html 파일로 저장할 수 있습니다.
  2. 매우 가볍다
  3. 템플릿 컴파일 및 캐시
  4. 템플릿 로딩 로직을 추상화합니다. 예를 들어 나중에 미리로드되고 미리 컴파일 된 템플릿을 사용할 수 있습니다.
  5. 사용하기 쉽다

[나는 이것이 중요하다고 생각하기 때문에 코멘트를 남기지 않고 답변을 편집하고 있습니다.]

템플릿이 네이티브 앱에 표시되지 않는 경우 “HIERARCHY_REQUEST_ERR : DOM Exception 3”-오류가 발생할 수있는 정확히 무엇입니까? “라는HIERARCHY_REQUEST_ERROR: DOM Exception 3 Dave Robinson의 답변 을 참조하십시오 ..

기본적으로 추가해야합니다.

dataType: 'html'

$ .ajax 요청에.

답변

이 믹스 인을 사용하면 Underscore 를 사용하여 매우 간단한 방법으로 외부 템플릿을 렌더링 할 수 있습니다 _.templateFromUrl(url, [data], [settings]). Method 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 파일을 생성하고 싶기 때문에 추가 ajax 요청을 할 필요가 없습니다. 그리고 동시에 코드를 리팩토링 할 필요가 없습니다.

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’라는이 작업과 함께 제공되며 기본적으로 로컬 grunt.js 파일 (기본적으로 자바 스크립트에서 Grunt 프로젝트의 구성 파일 인 파일)에 정의한 파일의 변경 사항을 모니터링합니다. ). 불만이있는 경우 다음을 입력하여이 작업을 시작합니다.

grunt watch

명령 줄에서 Grunt는 파일에 대한 모든 변경 사항을 모니터링하고 위에서 설명한 jst 작업 과 같이 변경 사항을 감지하면 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();