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

时间:2011-05-17 07:19:26

标签: javascript templates mustache

似乎很奇怪,我无法想象如何在胡子中做到这一点。是否支持?

这是我尝试的悲惨尝试:

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

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

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

5 个答案:

答案 0 :(得分:457)

这是你在Mustache中做/ if的方法(完全支持):

{{#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

答案 1 :(得分:52)

这是你在“控制器”中解决的问题,这是无逻辑的模板。

// 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,尽管给自己一个公平的机会学习这个概念;)

答案 2 :(得分:14)

您的 else 语句应如下所示(请注意^):

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

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

答案 3 :(得分:4)

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

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

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

答案 4 :(得分:0)

您可以在视图中定义一个助手。但是,条件逻辑在某种程度上受到限制。 Moxy-Stencil(https://github.com/dcmox/moxyscript-stencil)似乎使用“参数化”助手来解决此问题,例如:

{{isActive param}}

并在视图中:

view.isActive =函数(路径:字符串){返回路径=== this.path吗? “ class ='active'”:``}