外部化下劃線模板的方式

我以marionette.js開頭，並且正在尋找使用外部模板而不是腳本模板的方法。我已閱讀Derick的帖子，內容是關於a bad idea to load templates in async way。我還檢查了BBCloneMail以查看模板如何加載到那裏。事實證明，當Web應用程序加載時，這些包含在index.html頁面中。我想知道這對於可能有30多個模板和10多個屏幕（子應用程序）的大型應用程序來說是個好主意。我錯了嗎？外部化下劃線模板的方式

我在想，而不是加載一次我會加載所有這些模板的時候，我加載某些特定的子應用程序。這是一種好方法，還是有更好的方式來處理外部下劃線模板？

如果它可以提供答案的幫助，我已經計劃使用的提線木偶，不RequireJS提供的模塊系統。

預先感謝您。

最好的問候。

來源

2013-08-06 Roman K.

我遇到了同樣的問題。我在網上找到了一個例子，我修改它以使它適用於我正在做的事情（他們正在拉取html文件，我想拉ASP.net頁面），但我無法再在線找到該例子以便給予該人員信貸。不過，這裏是我修改後的代碼。

首先是模板裝載機：

if (!window.JackTemplateLoader) { 

function JackTemplateLoader(params) { 
    if (typeof params === 'undefined') params = {}; 
    var TEMPLATE_DIR = params.dir || ''; 

    var file_cache = {}; 

    function get_filename(name) { 
     if (name.indexOf('-') > -1) name = name.substring(0, name.indexOf('-')); 
     return TEMPLATE_DIR + name; 
    } 

    this.get_template = function (name) { 
     var template; 
     var file = get_filename(name); 
     var file_content; 
     var result; 
     if (!(file_content = file_cache[name])) { 
      $.ajax({ 
       url: file, 
       async: false, 
       success: function (data) { 
        file_content = data; 
        file_cache[name] = file_content; 
       } 
      }); 
     } 
     return file_content; 
    } 

    this.clear_cache = function() { 
     template_cache = {}; 
    }; 

    } 
}

然後我的木偶應用裏面，我創建了一個比寫木偶模板加載器的addInitilizer。

app.addInitializer(function (options) { 
    app.JackTemplateLoader = new JackTemplateLoader({ dir: "/api/ApplicationScreens/", ext: '' }); 
    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (name) { 
     if (name == undefined) { 
      return ""; 
     } else { 
      var template = app.JackTemplateLoader.get_template(name); 
      return template; 
     } 
    };

最好的部分是模板加載器將緩存我的模板，所以他們只加載一次。我正在對此代碼進行更改，以發送一個標誌來指示是否要緩存模板。

來源

2013-08-19 02:20:31 Kalpers

謝謝，看起來很有希望:)還發現[下面的文章]（http://johndavidmathis.wordpress.com/2012/09/13/preloading-backbone-marionette-templates-2/）。 –

既然你已經10+ subapps 30個+模板，假設每個子程序平均3個模板，這將是一個非常糟糕的主意由3加載它們，除非模板本身是非常沉重的。此外，今天互聯網是相當快的，我不害怕創造一些更重的網頁。

然而，在一個HTML文件中有30多個模板，使混亂。在這種情況下，我會建議使用Jammit或類似的東西。它可讓您爲開發中的每個模板分別創建html文件，並將其構建到單個文件中進行生產。

來源

2013-08-06 12:54:35 zaquest

數字只是一個例子，但應用程序本身是相當大的。謝謝你的回答，但我會檢查Jammit。但我想我最終可能會以異步方式加載模板。 –

@羅曼

我們使用requireJS！文本從外部文件加載模板。這就是我們如何使模板化模板。

你可以看看example in here。

來源

2013-08-06 12:55:00

謝謝你的回答，但我沒有在我的應用程序中使用RequireJS。 –

我知道我遲到了，但我已經用JST模板解決了這個話題。吞噬進程在運行時創建JST對象。我重寫木偶模板：

// use jst templates by overriding marionette render 
Marionette.Renderer.render = function(template, data) { 
    // allow No template 
    if (template === undefined) { 
     return ''; 
    } 
    if (!window.JST[template]) { 
     throw 'Template "' + template + '" not found!'; 
    } 
    // underscore create a template 
    return _.template(JST[template](data)); 
};

檢查我的骨架例如這種用法此： https://github.com/LucaMele/skeleton-marionette-require-gulp

來源

2015-11-17 10:47:00

外部化下劃線模板的方式

回答

相關問題