Question

我正在尝试在ember中使用Zurb Foundation网格，但我无法弄清楚如何让我的模板正确插入包含多列的行开始/结束标记。

我有一个控制器正确吐出＆＃34; isFirstOfRow，isLastOfRow＆＃34;，但我无法弄清楚如何让Ember的车把版本吐出不平衡的开/关标签。我的逻辑将平衡它们，但它们在{{#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，但是愚蠢地对待它，好像它是纯文本一样？

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

<强>更新

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

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

查看工作示例here

Answer 2

如果您使用常规网格（例如，如果您有不均匀的列或执行有趣的行交替样式/大小），则可能需要这样做，但如果您正在使用块网格，则绝对不需要。

看到这个小提琴：http://codepen.io/anon/pen/PwWRWa

如果您正在使用块网格，只需使用带有香草阵列控制器的普通旧{{#each ...}}，您就会变得金色！

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

基本控制器代码：

`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}}

我仍然认为构建控制器代码的方式可能比我想象的更清晰/更神奇，但这似乎解决了这个问题。

如果阻止，如何在余烬手柄中输出开始或结束标记？

2 个答案: