如何在 mustache.js 中完成 if/else？答案

【问题标题】：How do I accomplish an if/else in mustache.js?如何在 mustache.js 中完成 if/else？
【发布时间】：2011-08-27 00:26:25
【问题描述】：

我不知道如何在胡子上做到这一点似乎很奇怪。支持吗？

这是我悲伤的尝试：

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

这显然是不对的，但文档没有提到这样的事情。甚至没有提到“else”这个词:(

另外，为什么要这样设计小胡子？这种事情被认为是坏事吗？它是否试图强迫我在模型本身中设置默认值？那不可能的情况呢？

【问题讨论】：

“为什么要这样设计小胡子？”我不太确定，但我认为模板语言应该是这样的：一种用于编写模板的语言，即看起来像它们产生的输出的东西，只是变量位所在的位置有孔。将逻辑放入模板语言中会使模板更加复杂，而当您已经有了一种编程语言来处理逻辑位时，为什么还要麻烦呢？
@PaulD.Waite “无逻辑”实际上意味着“非任意代码”，我认为。将真正的视图逻辑放入代码中与将非视图逻辑放入模板中一样糟糕。 Mustache 试图提供一个最低限度的逻辑来实现这一点。
或使用handlebars 代替小胡子。能够写作，例如{{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}} 更具可读性，更简洁，并且仍然是演示文稿。 “无逻辑”是一个指导方针，它不一定是紧身衣。
当 OP 说“这是我的悲伤尝试 [...] 这显然是不对的”...然后接受的答案是副本时，它可能不是一个多功能的模板引擎-粘贴该代码:)。不判断OP或答案；就在mustache
如果你使用 PHP，试试sm-mustache，我已经实现了| else 块来减少那些额外的声明..

标签： javascript templates mustache

【解决方案1】：

这就是你在 Mustache 中执行 if/else 的方式（完全支持）：

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

或者在你的情况下：

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

在文档中查找倒置部分：https://github.com/janl/mustache.js#inverted-sections

【讨论】：

小胡子文档很有趣。 “我们称其为“无逻辑”，因为没有 if 语句、else 子句或 for 循环。”啊啊啊啊……
@boxed，从技术上讲你是对的，倒排部分是一个逻辑语句，因为它检查标签值。但是，我认为这里的细微差别是必须明确评估两个语句，而不是单个 if/else。基本上，小胡子强制结构if (condition){ //do something} 后跟if (!condition){//do something else}。此外，与基于逻辑的语言相比，可以在逻辑中执行的逻辑数量大大减少。存在或不存在是唯一的检查，即您无法检查标签的值是否等于 5，然后落入该标签的代码中。
@MandM 是的......所以它有逻辑但它不能做任何有用的事情：P
它只是让你远离 if else 逻辑。在另一个 if/else 中有很多嵌套的 if/else 是设计错误的标志
@boxed 你可以用 moustache.js 做 for 循环（至少是 ngFor-ish 循环）

【解决方案2】：

这是您在“控制器”中解决的问题，这是无逻辑模板的重点。

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

这实际上比维护图像 url 或其他可能会或可能不会在您的模板中更改的媒体要好得多，但需要一些时间来适应。关键是要忘记模板隧道视觉，头像img url必然会在其他模板中使用，您是要在X模板上维护该url还是单个DEFAULTS设置对象？ ;)

另一种选择是执行以下操作：

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

在模板中：

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

但这与无逻辑模板的全部含义背道而驰。如果这就是你想要做的，你想要逻辑模板并且你不应该使用 Mustache，尽管给自己一个公平的机会来学习这个概念;)

【讨论】：

谢谢。这是一个很好的回应！它实际上也帮助我处理了其他结构方面的问题，即 javascript 代码结构中的“何时做事”。
{/#hasAvatar}} 和 {{/#noAvatar}} 在这个答案中应该是 {{/hasAvatar}} 和 {{/noAvatar}}。

【解决方案3】：

您的 else 语句应如下所示（注意 ^）：

{{^avatar}}
 ...
{{/avatar}}

在小胡子中，这称为“倒置部分”。

【讨论】：

请注意，您不需要同时使用 # 和 ^，它只是 ^ 用于 'not' 大小写
这在最新版本中不起作用。 Zappan 是正确的，你只需要 ^

【解决方案4】：

注意，您可以使用{{.}} 来渲染当前上下文项。

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}

【讨论】：

【解决方案5】：

您可以在视图中定义一个助手。但是，条件逻辑有些局限。 Moxy-Stencil (https://github.com/dcmox/moxyscript-stencil) 似乎使用“参数化”助手解决了这个问题，例如：

在视图中：

view.isActive = function (path: string){ return path === this.path ? "class='活动'" : '' }

【讨论】：