【问题标题】:Mustache templates: How to output a block only once for non-empty lists小胡子模板:如何为非空列表只输出一次块
【发布时间】:2012-04-11 09:05:30
【问题描述】:

如果我的列表是空的,我想输出这个:

<div id="some-id">
</div>

如果我的列表不为空,我想输出这个:

<div id="some-id">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>etc</li>
  </ul>
</div>

请注意,我输出&lt;ul&gt;&lt;/ul&gt; 标签最多一次,并且仅当列表非空时。

以下代码与我在 PHP 中的执行方式很接近,但显然是错误的:

<div id="some-id">
{{#items}}
  <ul>
{{/items}}

{{#items}}
    <li>{{name}}</li>
{{/items}}

{{#items}}
  </ul>
{{/items}}
</div>

如果 items 是一个 3 项列表,我将获得 3 个 &lt;ul&gt; 的 - 显然不是我想要的。

我意识到我可以将一些其他键设置为布尔标志(也许是hasItems),但这感觉是多余的。

有没有更优雅的方法可以为非空列表只输出一次块?

【问题讨论】:

  • 在我看来(以及 4 年后)“小胡子”afaik 中的这个问题仍然没有令人满意的解决方案。我们需要与“倒置部分”相反的部分——如果键的值为真(键存在,非空列表,键值为真,...),则该部分仅呈现一次
  • 无论是否存在于上下文中,都会显示key值。如果值(字符串)超过 10 个字符,我不想显示它。我能做到吗???

标签: mustache


【解决方案1】:

如果您不想或不能重新格式化您的数据或模板引擎,您也可以在渲染&lt;ul&gt; 标签之前检查items.length。有些人对此不以为然,但这绝对是 Max 答案的替代方案。

{{#items.length}}
    <ul>
        {{items}}
            <li>{{name}}</li>
        {{/items}}
    </ul>
{{/items.length}}

【讨论】:

  • 不错。不过,这只适用于 JavaScript 的 JavaScript 实现,对吧?
  • 是的,但是大多数语言都有某种属性或方法,您可以检查这些属性或方法来获取数组的长度...对于 java,它是 .size 等。所以它应该 翻译成大多数语言。
  • 我使用的是PHP version of Mustache,它有一个count function,而不是属性或方法。但是,我只是尝试使用 ArrayIterator{{#items.count}} 按预期工作。这是伟大的。谢谢!
  • 拥有这个依赖于语言的功能只比改变模型结构以适应视图好一点
  • 渲染前如何获取name键并修改其值???是否有可能将 name 键的值设置为新变量??
【解决方案2】:

您可以使用部分的non-false valuesname 必须是 items 内的对象

data = { 'items' : { 'name' : ["Item 1", "Item 2", "etc"] } };

你的模板看起来像:

<div id="some-id">
    {{#items}}
    <ul>
        {{#name}}
        <li>{{.}}</li>
        {{/name}}
    </ul>
    {{/items}}
</div>

这里有一个关于 jsFiddle 的示例,显示了带有名称和不带名称的 items 对象的呈现 -- http://jsfiddle.net/maxbeatty/fpQwk/

【讨论】:

  • 嗯。这是一个有趣的想法。我可能会将数据表示为{ 'itemsContainer' : { 'items' : [ { 'name' : 'item 1' }, { 'name' : 'item 2' }, { 'name' : 'etc' } ] } };。谢谢!
  • 仅仅因为模板渲染不支持特定情况而不得不更改数据结构在我看来非常有限。
  • 如果你不想改变你的数据结构,改变你的模板引擎
【解决方案3】:

其他两个答案不适用于 Mustache 的 Ruby 实现。我的解决方案是发送一个附加参数作为模板上下文的一部分;例如

template = <<EOF
{{#has_items}}
<ul>
    {{#items}}
        <li>{{.}}</li>
    {{/items}}
</ul>
{{/has_items}}
EOF
items = ['one', 'two', 'three']
context = { items: items, has_items: items.any? }
Mustache.render(template, context)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-14
    • 2012-04-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多