我不知道如何在小胡子中做到这一点,这似乎很奇怪。支持吗?
这是我悲伤的尝试:
{{#author}}
{{#avatar}}
<img src="{{avatar}}"/>
{{/avatar}}
{{#!avatar}}
<img src="/images/default_avatar.png" height="75" width="75" />
{{/avatar}}
{{/author}}
这显然是不对的,但是文档中没有提到这样的事情。甚至没有提到“其他”这个词:(
还有,为什么胡子要设计成这样?这种事情算不算坏事?它是否试图强迫我在模型本身中设置默认值?那不可能的情况呢?
这就是 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
这是你在“控制器”中解决的问题,这就是无逻辑模板的要点。
// 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,但请给自己一个学习这个概念的公平机会;)
您的 else 语句应如下所示(注意
^
):
{{^avatar}}
...
{{/avatar}}
在小胡子中,这被称为“倒置部分”。
注意,您可以使用
{{.}}
来渲染当前上下文项。
{{#avatar}}{{.}}{{/avatar}}
{{^avatar}}missing{{/avatar}}
您可以在视图中定义一个助手。然而,条件逻辑有些有限。 Moxy-Stencil (https://github.com/dcmox/moxyscript-stencil) 似乎用“参数化”助手解决了这个问题,例如:
{{isActive param}}
在视图中:
view.isActive = function (path: string){ return path === this.path ? "class='active'" : '' }