如何在 ember handlebars if 块中输出开始或结束标记？

Question

我正在尝试在 ember 中使用 Zurb Foundation 网格，但我不知道如何让我的模板正确插入具有多列的行 start/end 标签。

我有一个控制器正确吐出 "isFirstOfRow, isLastOfRow"，但我不知道如何让 Ember 版本的车把吐出不平衡的 opening/closing 标签。我的逻辑会平衡它们，但它们不会在 {{#each}} 块的每次迭代中平衡。

我的模板是这样的：

{{#each item in items}}
    These are all working perfectly, thanks to my mad math skills:
    {{item.firstOfRow}}
    {{item.lastOfRow}}

    The problems start here:
    {{#if item.firstOfRow}}
        <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
            I shouldn't be closed immediately
    {{/if}}

    <li>
        <a href="/items/{{unbound id}}">
          <h4>{{item.title}}</h4>
          <p>{{item.description}}</p>
        </a>
    </li>

    ...and continue here:
    {{#if item.lastOfRow}}
            I should have been closed here.
            Ember outputs an unbalanced closing tag correctly,
            it's the opening that has the problem!
        </ul>
    {{/if}}

{{else}}

    This is irrelevant, and is working perfectly...
    <ul><div class="text-center"><strong>No items found</strong></div></ul>

{{/each}}

它会立即关闭顶部的 <ul> 标签。

有没有办法让 ember 模板输出 HTML，但把它当作纯文本一样笨？

编辑： 在我收到 comments/answer 之后，这是所有魔法发生后的预期模板扩展。它由 CSS 网格系统通常的工作方式（尤其是 Zurb 的工作方式）决定。类是近似值，元素层次结构是重要部分：

<div class="table">
  <ul class="row">
    <li class="item">
      <a href="/items/item1573">
        <h4>First item</h4>
        <p>It's an item!</p>
      </a>
    </li>
    <li class="item">
      <a href="/items/item4953">
        <h4>Second item</h4>
        <p>It's another item!</p>
      </a>
    </li>
  </ul>
  <ul class="row">
    <li class="item">
      <a href="/items/item4333">
        <h4>Third item</h4>
        <p>Item item item</p>
      </a>
    </li>
    <li class="item">
      <a href="/items/item53213">
        <h4>Fourth item</h4>
        <p>Items galore</p>
      </a>
    </li>
  </ul>
</div>

这是我用来驱动模板的控制器代码。它完美地输出了它的属性。我只是展示它来展示我正在尝试的完整端到端解决方案，以防你们对预期标记有更好的建议：

ItemsController = Ember.ArrayController.extend
    itemController: 'item'
    items: (->
        length = @get 'length'
        @map (item, i) ->
            item.last = i + 1 == length
            item.first = i == 0
            item.firstOfRow = i % 2 == 0
            item.lastOfRow = (i + 1) % 2 == 0
            item
    ).property 'content.@each'

Answer 1

我认为没有办法在 if 帮助程序中显示不平衡的 HTML 标签。但是，如果我明白你想做什么——你工作太努力了。 :)

为什么不将整个内容包装在 if/else 帮助程序中，并在数组不为空（如果条件为真）时显示项目，并在数组为空时显示消息？空数组的计算结果为 false.

    {{#if items}}
      <ul>
        {{#each item in model}}
        <li>{{item}}</li>
        {{/each}}
      </ul>
    {{ else }}
      No items
    {{/if}}

查看工作示例here

更新

您还可以使用 if 嵌套 each，例如：

  {{#each row in model}}
    {{#if row.items }}
      <ul>
        {{#each item in row.items }}
          <li>{{item}}</li>
        {{/each}}
      </ul>
    {{/if}}
  {{/each}}

查看工作示例here

Answer 2

如果您使用规则网格（例如，如果您有不均匀的列或进行有趣的行交替 style/sizes），这可能是必要的，但如果您使用块状网格，则绝对没有必要。

看到这个fiddle：http://codepen.io/anon/pen/PwWRWa

如果您使用的是方块网格，只需使用原版阵列控制器做一个普通的旧 {{#each ...}}，您就会获得成功！

我通过改变我从控制器输出数据的方式解决了这个问题，ala 。

基地控制器代码：

`import Ember from "ember";`

GridController = Ember.ArrayController.extend
    rows: (->
        width = @get 'rowWidth'
        height = @get('length') / @get('rowWidth')
        result = Ember.A(Ember.A() for i in [0..height])
        @forEach (item, index) ->
            result[Math.floor(index / width)].push(item)
        return result
    ).property 'content.@each'

`export default GridController;`

特定的控制器代码（根据需要对尽可能多的网格重复）：

`import GridController from "./grid";`

BlahDeeBlahsController = GridController.extend
    itemController: 'blah-dee-blah'
    rowWidth: 4

`export default BlahDeeBlahsController;`

模板代码：

{{#each row in rows}}
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
    {{#each item in row}}
    <li>
        <a href="/items/{{unbound id}}">
            <div class="panel text-center">
                <h4>{{item.title}}</h4>
                <p>{{item.description}}</p>
            </div>
        </a>
    </li>
    {{/each}}
</ul>
{{else}}
<ul><div class="text-center"><strong>No items found</strong></div></ul>
{{/each}}

我仍然认为可能有一种 cleaner/more 神奇的方法来构建控制器代码，而不是我想出的方法，但这似乎可以解决问题。

如何在 ember handlebars if 块中输出开始或结束标记？

How do I output an opening or closing tag in an ember handlebars if block?

ember.js

zurb-foundation

handlebars.js