gpt4 book ai didi

jquery - 在无逻辑 mustache 模板引擎中实现条件

转载 作者:行者123 更新时间:2023-12-01 03:45:41 25 4
gpt4 key购买 nike

到目前为止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 中应该有另一种方法来做同样的事情。还是不应该?

所以, 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 插件)集成是一个优势,但不是必需的 - 我可以自己完成。

谢谢。

最佳答案

总有Handlebars它比普通 Mustache(它是 Mustache 的超集)功能更丰富一些,当然您可以使用其他无数可用于 JS 的模板引擎中的任何一个。如果您使用 Handlebars,您甚至可以重新实现一个接受多个参数的 {{#if}} block 助手版本,如下所示(警告:经过非常轻微的测试,大部分是从我的顶部编写的)头)

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它可以轻松地跨编程语言移植,以便您可以在后端和前端互换地重用您的模板。

关于jquery - 在无逻辑 mustache 模板引擎中实现条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13740140/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com