요구 사항이있는 백본의 미리 컴파일 된 핸들 막대 템플릿?

Question

require.js와 핸들 바 템플릿을 사용하는 backbone.js 앱을 사용하여 엉망으로 만들었습니다. (저는 핸들 바에 AMD 모듈을 추가했습니다) 템플릿을 미리 컴파일하면 공정한 비트 속도를 낼 수 있습니다. .

나는 requirejs가있는 미리 컴파일 된 템플릿을 어떻게 포함하는지 궁금합니다. 컴파일을위한 템플릿이 너무 적어 (15 개 이상), 모두 동일한 출력 파일에 포함되어 있는지 또는 컴파일 된 파일인지를 잘 모릅니다. 또한 컴파일 된 템플릿은 renderer 스크립트에서 사용하는 것과 동일한 Handlebars 네임 스페이스를 공유하므로 내 파일에 템플릿이 필요할 때 어떻게 처리할지 잘 모르겠습니다.

어떤 조언도 좋을 것입니다! https://github.com/SlexAxton/require-handlebars-plugin

Answer 1

는 Requirejs-Handlebarsjs 플러그인에서보세요! 플러그인. 그러면 템플릿이로드되고 컴파일됩니다. RequireJs는 컴파일 된 템플릿을 캐시하고 재사용합니다.

플러그인 코드 : main.js에서

// hbtemplate.js plugin for requirejs/text.js 
// it loads and compiles Handlebars templates 
define(['handlebars'], 
function (Handlebars) { 

    var loadResource = function (resourceName, parentRequire, callback, config) { 
     parentRequire([("text!" + resourceName)], 
      function (templateContent) { 
       var template = Handlebars.compile(templateContent); 
       callback(template); 
      } 
     ); 
    }; 

    return { 
     load: loadResource 
    }; 

}); 

구성하십시오 backbone.marionette보기

require.config({ 
    paths: { 
     handlebars: 'libs/handlebars/handlebars', 
     hb: 'libs/require/hbtemplate', 
    } 
}); 

사용 :

define(['backbone', 'marionette', 
     'hb!templates/bronnen/bronnen.filter.html', 
     'hb!templates/bronnen/bronnen.layout.html'], 
     function (Backbone, Marionette, FilterTemplate, LayoutTemplate) { 
     ... 

경우, 당신은 큰 백본을 사용 .Marionette 프레임 워크 기본 렌더러를 재정 의하여 t를 우회 할 수 있습니다. 그는 내장 된 템플릿 로더 (로딩/컴파일/캐싱 용) :

Marionette.Renderer = { 
    render: function (template, data) { 
     return template(data); 
    } 
}; 

Answer 2

간단한 방법은 기존 텍스트를 기반으로 RequireJS 플러그인을 작성하는 것입니다 :