ember.js - 如果 block ，如何在 ember Handlebars 中输出开始或结束标记？

Question

我正在尝试在 ember 中使用 Zurb Foundation 网格，但我不知道如何让我的模板正确插入多列的行开始/结束标记。

我有一个 Controller 正确吐出“isFirstOfRow，isLastOfRow”，但我不知道如何让 Ember 版本的 Handlebars 吐出不平衡的开始/结束标签。我的逻辑会平衡它们，但它们不会在 {{#each}} 的每次迭代中平衡。 block 。

我的模板是这样的:

{{#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，但把它当作纯文本一样笨拙地对待？

编辑:在我收到评论/回答后，这里是所有魔法发生后的预期模板扩展。它由 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>

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

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

更新

你也可以有一个嵌套的 each 和一个 if 像这样:

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

查看工作示例 here