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

Question

到目前为止，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插件)集成是一个优势，但不是一个要求——我可以自己完成。

谢谢。

Answer 1

总有Handlebars比vanilla 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的重点是有一个非常小的规范，可以很容易地在编程语言之间移植，这样你就可以在后端和前端互换地重用你的模板。