两者似乎都以类似的方式做着非常相似的事情.

• 两者都允许你将javascript嵌入到模板中,并拥有相同的3种类型的标签 - 限制替换,转义替换,嵌入js-.
• 两者都能够通过创建生成器函数来"预先"模板.
• 此外,两者都可以用作express/node.js的模板引擎.(以及在浏览器中,以及支持js的其他任何地方).

因此,当必须在EJS和underscore.js模板之间进行选择时:应该考虑哪些事项？只是名字不同,它们是一样的吗？如果是这种情况,为什么有2个模板引擎如此相似？

1. 我有HTML模板文件(下划线模板语法)
2. 这些文件以HTML格式保存,因此易于编辑(IDE语法高亮显示)
3. 我不想用ajax获取它们,而是将它们全部组合起来并将它们作为js文件包含在内.
4. 使用GULP作为我的任务运行器,我希望以某种方式将所有 HTML 组合成这样的东西,作为我可以包含在我的BUILD过程中的javascript文件:

template_file_name 是HTML文件名.

var templates = {
   template_file_name : '...template HTML string...',
   template_file_name2 : '...template HTML string...',
   template_file_name3 : '...template HTML string...'
}

我真的不知道如何处理这个,以及如何从所有文件创建这样的文本..我可以将每个单独的文件转换为字符串,但我怎么能把它放在一个对象中？

更新 - 10月25日,15日 - ES6模块:

对于那些希望您的模板作为ES6模块的人,我创建了gulp-file-contents-to-modules

演示输出:

export var file_name = "This is bar.";
export var file_name2 = "This is foo.\r\n";
export var my-folder__file_name = "This is baz.\r\n";

我的所有NPM包都与使用gulp组合模板文件有关:

1. https://www.npmjs.com/package/gulp-file-contents-to-keys
2. https://www.npmjs.com/package/gulp-file-contents-to-modules
3. https://www.npmjs.com/package/gulp-template-compile-es6

正如最新的Marionette文档中所述:

CompositeView已弃用.您应该使用该replaceElement选项Region.show并将其渲染CollectionView到a内的区域View以实现此功能.

我仍然无法理解CompositeView现在应该如何实现功能.

以前,CompositeView非常适合使用这样的模板:

<script id="table-template" type="text/html">
<table>
  <% if (items.length) { %>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
 <% } %>

  <tbody></tbody>

  <tfoot>
    <tr>
      <td colspan="3">some footer information</td>
    </tr>
  </tfoot>
</table>

new MyCompositeView({
  template: "#table-template",
  templateContext: function() {
    return { items: this.collection.toJSON() };
  }
  // ... other options
});

如果我们决定使用LayoutView而不是CompositeView那时我们需要手动编写许多事件绑定(例如根据集合中的项目数显示/隐藏表头).这使事情变得更难.

没有任何干净而不复杂的生活方式CompositeView吗？

感谢您的任何帮助或建议.

我的webpack2配置中有一个下划线模板加载器,用babel编译.它在编译时失败,因为with它在代码编译代码中使用.以下是我的加载器中的相关部分webpack.config.js:

我在装载程序下有这个部分:

{
    test: /\.html$/,
    use: [
        {
            loader: 'babel-loader',
            query: {
                presets: [
                    ['es2015', { modules: false }],
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            },
        },
        {
            loader: 'ejs-loader',
        },
    ],
};

这就是我想要的,我得到的:

ERROR in ./src/table/row.html
Module build failed: SyntaxError: 'with' in strict mode (5:0)

  3 | var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
  4 | function print() { __p += __j.call(arguments, '') }
> 5 | with (obj) {
    | ^
  6 …

我们目前需要使用Backbone.Marionette和下划线模板为中型应用添加国际化.

经过一番深入研究后,出现了两个有效的选择:

• underi18n提供与下划线的直接集成,但缺乏多元化,这对于支持法语和英语更为重要
• i18next提供强大的API,但只与手柄模板 直接集成

我们需要在更长的时间内本地化更多的语言(希望如此!)因此,underi18n可能会达不到,唯一可行的解​​决方案就是i18next.

在进一步讨论之前,我将概述我的两个问题,然后提供我所经历的完整背景和研究过程.

1. 如何使用i18next和Marionette集中模板的本地化
2. 如何在所有下划线模板中注入全局帮助器

集中模板的本地化

我发现i18n非常麻烦的一件事是你必须在你所有的onRender功能中调用它,这意味着在我们的几十个当前视图和我们未来的所有视图中添加一个调用.在我看来,纠正我,如果我弄错了,这将是这样的:

MyView = Marionette.ItemView.extend({

  template: myUnlocalizedTemplate,

  onRender: function () {
    /* ... some logic ... */
    this.$el.i18n();
  }
  /* And everything else... */
});

并反复重复.

从实施和维护的角度来看,我觉得这很不方便,所以我开始深入研究Backbone和Marionette,记得从过去的项目中有一些全局预处理模板的方法.
我偶然发现了Marionette.Renderer,它似乎是这项工作的正确工具.但在进入i18next的完整安装和实现之前,我想确保我走在正确的道路上.
因为如果我可以清楚地看到如何underi18n并_.template(under18n.template(myTemplate, t));可能与渲染器以及集成和提供给我一个全球性的解决方案,预处理和本地化我的模板,我不那么肯定去与i18next在这种情况下的方式.
事实上我找不到任何人这样做的例子也让我担心,每个人都要使用车把模板还是.i18n()在每个视图中手动调用？在这一点上,没有jquery元素可以绑定翻译,所以我很困惑这可能是怎么回事.

将是一个非常赞赏的答案,提供我想要完成的一个例子,进一步的文档或途中的提示!

我试图让if/else插入与Underscore.js和HAML一起使用,但无济于事.我已经将Underscore.js中的插值设置更改为以下内容:

_.templateSettings = {
  interpolate : /\{\{([\s\S]+?)\}\}/g
};

当我尝试在{{value}}之类的符号中插入值时,这很有效.但是,我没有使if/else语句有效.我有以下内容:

{{ if (true) { }}
  {{ val }}
{{ } }}

我得到一个Javascript异常"Uncaught SyntaxError:Unexpected token if".非常感谢帮助.

将我的Web应用程序从下划线1.6升级到1.7时,我收到以下错误"列表未定义".使用下划线1.6时效果很好.有任何想法吗？

//acquire the list template
$.get('tpl/listTpl.html', function(templates) {

//run underscore js on the list template and pass in the full collection of models
var template = _.template(templates, {list:app.collections.list.models});

//load the underscore template into the DOM
that.$el.html(template);

});

我试图使用下划线模板呈现基本主干视图,但在尝试呈现模板时,我一直收到以下错误.

未捕获的ReferenceError:未定义金额

这里是jsfiddle:http://jsfiddle.net/rkj6j36n/

HTML

<body>
    <div class="msg-con"></div>
</body>

JS

DumbViewObj = Backbone.View.extend({
    el: $('.msg-con'),
    initialize:function(){
        this.render();
    },
    render: function(){
        var template = _.template('I am <%= amount %> dumb',{amount:'200'});
        this.$el.append(template);
    },
});
var dumb = new DumbViewObj();

我确信解决方案很简单,但我无法弄清楚

我想使用underscorejs的模板功能.似乎HTML5的<template>标签对于它来说是一个令人惊讶的标签,但是有一个障碍......下划线插值标签(<%并%>获得html转义,因此模板标签内的HTML看起来像这样:

$('template.new-email').html()

=>

"
  <div class="email">
    <div class="timestamp">
      &lt;%= received %&gt;
    </div>
    <div class="from">
      &lt;%= from %&gt;
    </div>
    <div class="title">
      &lt;%= title %&gt;
    </div>
    <div class="message">
      &lt;%= message %&gt;
    </div>
  </div>
"

好吧,那很糟糕.

现在,事实证明,如果我使用虚构类型的脚本标记,例如"x-underscore-templates",那么它看起来像hunky-dory:

$('.new-email').html()

=>

"
  <div class="email">
    <div class="timestamp">
      <%= received %>
    </div>
    <div class="from">
      <%= from %>
    </div>
    <div class="title">
      <%= title %>
    </div>
    <div class="message">
      <%= message %>
    </div>
  </div>
"

所以我的问题是 - 我可以使用模板标签吗？如何在字符串中获得我需要的字符,以便将它们传递给下划线的模板系统？

注意 - 由于我现在使用的服务器是使用把手作为服务器端模板系统的hapijs/node服务器,我不能只使用{{和}}.

我在我的下划线模板中有一个表达式,如下所示:

'<%= a %> div <%= b %> is <%= a/b %>'

我想将小数计数限制为特定数字.是否有可能在underscore.js？

预期:

'10 div 3 is 3.33'

但实际上我看到了:

'10 div 3 is 3.333333333'