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

258

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

这是我尝试的尝试：

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

这显然是不对的，但是文档中没有提到这样的内容。甚至没有提到“其他”这个词：(

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

javascript templates mustache

— 埃格瓦里
source

1

“为什么胡须是这样设计的？” 我不太确定，但我认为想法是，模板语言应该就是：一种用于编写模板的语言，即看起来像它们产生的输出的东西，只是在可变位所在的地方带有孔。将逻辑放在模板语言中会使模板更加复杂，而当您已经有了一种编程语言来处理逻辑位时，何必呢？

— Paul D. Waite

4

@ PaulD.Waite我认为“无逻辑”的意思是“非任意代码”。将真正的视图逻辑放入代码中与将非视图逻辑放入模板中一样糟糕。小胡子试图提供一个最低限度的逻辑来实现这一目标。

— 2014年

2

或使用车把代替小胡子。能够写作，例如{{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}，更具可读性，更清洁，并且仍然是呈现形式。“无逻辑”是一个准则，它不一定是紧身衣。

— skierpage

当OP表示“这是我的可悲尝试，这显然是不正确的”时，也许它不是通用的模板引擎，然后可接受的答案是该代码的复制粘贴:)。无法判断OP或答案；就在mustache

— dwanderson

497

这是在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

— 内科·阿隆索（Eneko Alonso）
source

88

小胡子文档很有趣。“我们称其为“无逻辑”，因为没有if语句，else子句或for循环。” Yeeeeaaaaaa ....

— 盒装

6

@boxed，从技术上来说您是对的，反向部分是逻辑语句，因为它检查标记值。但是，我认为这里的细微差别是必须显式评估两个语句，而不是单个if / else。基本上，胡须会强制结构，if (condition){ //do something}后跟一个if (!condition){//do something else}。而且，与基于逻辑的语言相比，可以在逻辑中执行的逻辑量大大减少。存在或不存在是唯一的检查，即，您无法检查标签的值是否等于5，然后落入该标签的代码中。

— MandM，2015年

22

@MandM是的...所以它具有逻辑性，但是它不能做任何有用的事情：P

— 盒装

它只是使您远离混乱逻辑。在另一个if / else中嵌套很多if / else表示设计不当

— Tebe

@boxed您可以使用moustache.js（至少是ngFor-ish循环）进行循环

— aloisdg移至codidact.com，2016年

54

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

// 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

}

实际上，这比维护可能会在模板中更改的图像网址或其他媒体要好得多，但是需要一些时间来适应。关键是要取消学习模板隧道的视觉效果，在其他模板中一定要使用化身img url，您是否要在X模板或单个DEFAULTS设置对象上维护该URL？;）

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

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

并在模板中：

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

但这违背了无逻辑模板的全部含义。如果那是您想要做的，那么您就需要逻辑模板，并且不应该使用Mustache，尽管您可以给自己一个学习该概念的机会；）

— 格里森
source

谢谢。这是一个很好的回应！实际上，它在其他方面也帮助了我，例如在JavaScript代码的结构中“何时做事”。

— egervari

在此答案中，{{/＃hasAvatar}}和{{/＃noAvatar}}应该是{{/ hasAvatar}}和{{/ noAvatar}}。

— Mulhoon，2012年

14

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

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

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

— 化名
source

7

请注意，您不需要＃和^，仅是^，表示“不是”

— zappan 2011年

在最新版本中不起作用。Zappan是正确的，您只需要^

— simonmorley13年

0

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

并在视图中：

view.isActive =函数（路径：字符串）{返回路径=== this.path？“ class ='active'”：''}

— 丹尼尔
source

0

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

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

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

— 哈夫索尔
source