在无逻辑胡子模板引擎中实现条件答案

【问题标题】：Implement conditions in logic-less mustache template engine在无逻辑胡子模板引擎中实现条件
【发布时间】：2012-11-24 06:38:42
【问题描述】：

到目前为止mustache 很棒，但现在似乎没有逻辑功能。假设，我必须渲染模板，其中我可以有用户的电子邮件和姓名。

如果电子邮件和姓名都存在，我希望我的渲染结果是：

<a href="mailto:EMAIL">NAME</a>

如果存在电子邮件，但不存在姓名，则结果将是：

<a href="mailto:EMAIL">EMAIL</a>

如果只存在名称，则模板应呈现为：

NAME

所以现在我必须这样做：

{{#email}}<a href="mailto:{{email}}">{{#name}}{{name}}{{/name}}{{^name}}{{email}}{{/name}}</a>{{/email}}{{^email}}{{name}}{{/email}}

这太丑了！而这只是3个条件！如果我需要更多怎么办？我觉得在mustache 中应该有另一种方式来做同样的事情。还是不应该？

所以，小胡子开发人员认为没有逻辑是一件好事，但我有一个论点。大多数时候我们需要检查模板中的一些变量（大多数时候我们只需要检查是否存在）。所以我会做这样的事情：

{% if email %}{{ email }}{% else %}{{ name }}{% endif %}

这样看起来就更全面了

{{#email}}{{email}}{{/email}}{{^email}}{{name}}{{/email}}

不是吗？

如果我也需要查看name：

{% if email %}{{email}}{% elif name %}{{name}}{% else %}Anonymous{% endif %}

对

{{#email}}{{email}}{{/email}}{{^email}}{{#name}}{{name}}{{/name}}{{^name}}Anonymous{{/name}}{{/email}}

如果没有，您会建议在javascript 中使用另一个模板库来呈现模板吗？与jQuery（jQuery-plugin）集成是一个优势，但不是必需的——我可以自己做。

谢谢。

【问题讨论】：

看看这个：garann.github.com/template-chooser
一些 Mustache 实现接受 {{#foo}}...{{^foo}}...{{/foo}} 语法，它更短一些。有些人甚至接受{{#foo}}...{{^}}...{{/}}。然而，当然，Mustache 仍然很冗长。

标签： jquery templates conditional-statements mustache

【解决方案1】：

Handlebars 总是比普通的 Mustache 功能更丰富一些（它是 Mustache 的超集），当然您可以使用任何其他可用于 JS 的无数模板引擎。如果你使用 Handlebars，你甚至可以重新实现一个接受多个参数的 {{#if}} 块帮助器版本，像这样（警告：非常轻微的测试，大部分都是在我的脑海中写出来的）

Handlebars.registerHelper('if', function() {
    var args = Array.prototype.slice.call(arguments),
        options = args.splice(-1, 1)[0],
        allPass = true,
        context;

    for (var i = 0; i < args.length; i++) {
        context = args[i];

        if(Object.prototype.toString.call(context) === "[object Function]") { 
            context = context.call(this);
        }

        if (!context || Handlebars.Utils.isEmpty(context)) {
            allPass = false;
            break;
        }
    }

    if(allPass) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

并像这样使用它：

var template = "{{#if a b c}}pass{{else}}fail{{/if}}";
var c = Handlebars.compile(template);
console.log(c({a: true, b: pass, c: true}))

请注意，当您实现某种复合逻辑运算符时，这可能被纯粹主义者认为是“作弊”，甚至使其接受不确定数量的参数。 Mustache 的重点是有一个非常小的spec，它可以轻松地跨编程语言移植，这样您就可以在后端和前端互换地重用模板。

【讨论】：