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

Question

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

这是我悲伤的尝试：

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

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

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

Answer 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}}

在文档中查找倒置部分：

Answer 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 模板或单个 DEFAULTS 设置对象上维护该 url？ ;)

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

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

在模板中：

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

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

Answer 3

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

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

在 Mustache 中，这称为“反向部分”。

Answer 4

请注意，您可以使用 {{.}} 来呈现当前上下文项。

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

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

Answer 5

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

{{isActive param}}

并在视图中：

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