다른 HTML 파일의 템플릿을 결합하는 방법

녹아웃의 개별 템플릿이 스크립트 태그에 보관되므로 태그의 src 속성을 설정하고 HTML을 별도의 파일에서로드 할 수 있다고 생각했습니다. 순진 단순히 작동하지 않았다 이렇게, 그래서 하나 내가 다른 파일에서 템플릿을로드 할 다른 방법이있다 다른 HTML 파일의 템플릿을 결합하는 방법

사용할 필요가 src 태그와 함께 작동하도록 템플릿의 바인딩을 얻기에 약간의 트릭이있다

(다른 두 가지 가능성 - 3,이 프로젝트의 모든 프로그래머는 시작시 브라우저가로드하는 동일한 거대한 파일을 수정해야하며 4, Knockoutjs는 장난감 프로젝트보다 큰 것 - 나는 동등한 것으로 생각한다.)

출처

2012-05-01 Malvolio

브라우저는 다양한 'javascript'유형 중 하나 이외의 유형을 가진 것과 스크립트로 결과를 실행하려고 시도하는 유형 이외의 것에 대해서는 src에 응답하지 않습니다.

여러 가지 옵션을 생각 :

사용을 원격으로 템플릿을 풀 수있는 템플릿 엔진 (최고의 하나는 여기에 있습니다 : https://github.com/ifandelse/Knockout.js-External-Template-Engine).
템플릿이 포함 된 스크립트 태그에서 반복하여로드하십시오. 이렇게하면 src을 위치로 사용하여 콘텐츠를 가져옵니다. 템플릿이 준비되지 않은 경우 applyBindings를 호출 할 때는주의해야합니다. 내 프로젝트에서 http://www.knockmeout.net/2011/03/using-external-jquery-template-files.html

출처

2012-05-01 19:14:12

각 템플릿은 자신의 HTML 파일입니다

$("script[type='text/html']").each(function(index, el) { $.get($(el).attr("src"), 
    function(response) { 
     $(el).text(response); }); 
});

는 여기에 다시 동안 이것을하기를위한 보았다 몇 가지 다른 옵션입니다. 그들을 식별하기 위해 명명 규칙 (* .ko.html)을 사용합니다. 내 빌드 체인은 다음과 같이 진행됩니다

1 단계 : 보풀 및 작게하다 * .ko.html 파일 이 단지 (을 제외한) 주석을 제거하고보다 컴팩트 한 페이로드에 대한 여분의 공백을 제거하는 것입니다.

2 단계 : 축소 된 html을 js 파일로 문자열 화하고 연결합니다. JS는로드 할 수있는이 방법은 간단한 <script> 태그 대신 아약스의 get + 주입을 사용하기 때문에 내가 <script type="text/plain"> 구분 기호가있는 HTML 파일로 합치 생각하지만, JS를 선택 않았다

var templates={ 
    'name1':'some stringified html', 
    'name2':'some more' 
};

같이 보입니다.

3 단계 : js 개체에서 템플릿을 검색하기 위해 기본 템플릿 엔진을 수정합니다.

var engine = new ko.nativeTemplateEngine(); 
engine._makeTemplateSource = engine.makeTemplateSource; 

engine.makeTemplateSource = function (template, doc) {   
    if (typeof (template) === 'string' && templates[template]) { 
     return { text: function() { return templates[template]; } }; 
    } 
    return engine._makeTemplateSource(template, doc); 
}; 
ko.setTemplateEngine(engine);

내 구현은 이러한 빌드 단계를 수행 할 gruntjs를 사용합니다.(툴툴-있는 contrib-htmlmin, 꿀꿀-있는 contrib-CONCAT) htmlmin에 대한

옵션 : 사람이하고 싶은 이유를 궁금해 사람들을위한 CONCAT

{ 
    stripBanners: true, 
    banner: "(function(t){", 
    footer: "})(window.templates || (window.templates={}));", 
    process: function (src, file) { 
     return 't[\'' + file.replace(/^.*\//, '').replace('.ko.html', '') + '\']=' + JSON.stringify(src) + ';'; 
    } 
}

에 대한

{ 
removeComments: true, 
collapseWhitespace: true, 
ignoreCustomComments: [/^\s*ko /, /^\s*\/ko /] 
}

옵션 : 템플릿 소스 파일은 모든 HTML 편집기에서 편집 할 수있는 표준 개별 HTML 파일이며 소스는 이와 같이 제어됩니다. <script> 태그 안에서 HTML을 편집하는 것은 재미가 없습니다. 보너스로, 소스 파일에는 주석을 제거 할 수 있습니다. 스크립트 태그를 포함하여 모든 페이지에서 템플릿을 다시 사용할 수 있습니다. 모든 페이지에 인라인 할 필요가 없습니다. 결과 번들은 브라우저가 쉽게 캐시 할 수있는 정적 파일이지만 동적으로 생성 된 페이지에 포함 된 템플릿은 캐시 할 수 없습니다. 자바 스크립트 파일을 묶는 데 거의 같은 이유가 있습니다.

출처

2015-07-15 22:05:30

안녕하세요. 샘플이있는 온라인 리포지토리가 있습니까? github에? – hehe

다른 HTML 파일의 템플릿을 결합하는 방법

답변

관련 문제