Backbone中的Requiremat預編譯的Handlebars模板？

我一直在使用require.js和一個handlebars模板（我已經添加了AMD模塊的東西到handlebars）backbone.js應用程序，只讀了預編譯模板可以加快它的一個公平的位。Backbone中的Requiremat預編譯的Handlebars模板？

我想知道如何去包括帶有requirejs的預編譯模板。我有一個公平的幾個模板來編譯（15以上），所以我不知道他們應該都在同一個輸出文件或有自己的編譯。此外，從看起來，編譯的模板共享renderer腳本使用的相同的Handlebars命名空間，所以我不知道如何在我的文件中需要模板時去解決這個問題。

任何意見都會很棒！

來源

2012-03-27 Tom Brunoli

看一看在Requirejs-Handlebarsjs插件：https://github.com/SlexAxton/require-handlebars-plugin

來源

2012-03-27 11:09:11

謝謝！這似乎工作非常好。我喜歡它如何與r.js整合 – 2012-03-27 11:42:53

一個簡單的方法是創建一個基於現有文本RequireJS插件！插入。這將加載和編譯模板。 RequireJs將緩存並重新使用已編譯的模板。

插件代碼：

// 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 
    }; 

});

配置在main.js：

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

使用在backbone.marionette觀點：

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); 
    } 
};

來源

2012-06-16 08:38:11

這很好，但它不處理偏色，是嗎？ – Leonidas 2012-11-21 03:37:35

只要你註冊他們我看不出爲什麼它不會工作 – 2012-12-03 23:36:31

我最終使用這種技術取得了很好的成功，但我添加了一個有助於性能的轉折。如果可能的話，我們希望使用預編譯的模板，所以Grunt.js將我們所有的模板編譯成一個名爲JST []的關聯數組，每個模板都由文件名提供。向上面的代碼添加一些東西是很容易的，它檢查JST的存在，然後檢查該數組中的特定模板。如果它在那裏，則返回預編譯的模板。否則，按照圖示進行加載並編譯它。然後，您可以開發使用許多模板，您可以隨意更改並在運行時使用預編譯模板。 – 2012-12-19 21:19:03

Backbone中的Requiremat預編譯的Handlebars模板？

回答

相關問題