0

我从 marionette.js 开始，正在寻找使用外部模板而不是脚本模板的方法。我已经阅读了 Derick 的帖子，关于以异步方式加载模板是一个坏主意。我还检查了 BBCloneMail 以查看模板是如何加载的。事实证明，这些内容在 Web 应用程序加载时包含在 index.html 页面中。我想知道这对于一些可能有 30 多个模板和 10 多个屏幕（子应用程序）的大型应用程序是否是一个好主意。我弄错了吗？

我在想，不是一次加载所有模板，而是在加载一些特定的子应用程序时加载它们。这是处理外部下划线模板的好方法还是有更好的方法？

如果它可能有助于提供答案，我计划使用 marionette 提供的模块系统，而不是 RequireJS。

先感谢您。

最好的祝福。

4

4 回答 4

1

@罗马

我们使用 requireJS!text 从外部文件加载模板。这就是我们使模板模块化的方式。

你可以看看这里的例子。

于 2013-08-06T12:55:00.943 回答
1

我知道我迟到了，但我已经通过使用 JST 模板解决了这个话题。gulp 进程在运行时创建 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-17T10:47:00.667 回答
0

由于您有 10 多个子应用程序和 30 多个模板，假设每个子应用程序平均有 3 个模板，那么将它们加载 3 个将是一个非常糟糕的主意，除非模板本身非常重。此外，今天互联网在任何地方都非常快，我不怕创建更重的页面。

但是，在一个 html 文件中包含 30 多个模板会造成混乱。在这种情况下，我建议使用Jammit或类似的东西。它允许您为开发中的每个模板拥有单独的 html 文件，并将其构建为单个文件以用于生产。

于 2013-08-06T12:54:35.100 回答
0

我遇到了同样的问题。我在网上找到了一个示例，我对其进行了修改以使其适用于我正在做的事情（他们正在提取 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 = {};
    };

  }
 }

然后在我的 Marionette 应用程序中，我创建了一个 addInitilizer 来覆盖 Marionette 模板加载器。

    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-19T02:20:31.117 回答