Question

我正在使用 gulp-html-i18n gulp插件来处理静态网站中的翻译任务。

为了显示翻译的内容，我应该使用 Moustache lib作为他的doc中提到的 gulp-html-i18n 。

我在连接操作中遇到困难。例如，如果我需要为html元素分配条件类，则将使用以下流程：

${{! if}}$
 ${{#index.isEnglish}}$
<body class="en">
 ${{/index.isEnglish}}$
${{! else}}$
 ${{^index.isEnglish}}$
<body class="sp">
 ${{/index.isEnglish}}$

例如，在上面的代码中，我正在检查语言是否为英语，然后根据 isEnglish 值分配该类。

通过这种方法，如果我需要添加新的语言，因为它又长又不全面，我们将面临一个大问题。

此外，假设我在以下界面中有一个对象数组：

"data":[{
 "title": "foo",
 "description": "bar",
 "icon": "iconname"
},...]

在遍历上面的数组时，如果需要用 scr 属性路径连接图标名称怎么办？

<div class="content">
    ${{#index.home.services.data}}$
    <h3>
        ${{title}}$
    </h3>
    <p>
        ${{description}}$
    </p>
    <img src="path/${{}}$.png" alt=""> ---> Not working with Moustache
    ${{/index.home.services.data}}$
</div>

那么我该如何解决以上问题？以及Moustache.js串联的最佳做法是什么？

Answer 1

喜欢！

使用类型为 text / template 的脚本解决。

我们不能直接在html属性中执行concatition运算符，我们应该在 text / template 类型的脚本中编写它。类似于以下示例：

<script type="text/template" id="header">
    ${{#index.pages}}$
    <button>
        <a href="./${{fileName}}$"></a>
        ${{title}}$
    </button>
    ${{/index.pages}}$
</script>

然后呈现脚本内容，并使用以下javascript代码将其分配给特定的html元素：

var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate);
$('#navBar').html(headerHtml);

注意：美元符号基于gulp插件用于本地化任务gulp-html-i18n 为了将json文件链接到小胡子。

如果我不使用上述插件，则必须将代码更新为：

var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate,'path to data');
$('#navBar').html(headerHtml);

最有用的链接之一here。

大口小胡子。如何使用src属性连接数据？

1 个答案: