如何在 ember handlebars if 块中输出开始或结束标记?
How do I output an opening or closing tag in an ember handlebars if block?
我正在尝试在 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'
我认为没有办法在 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
如果您使用规则网格(例如,如果您有不均匀的列或进行有趣的行交替 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 中使用 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'
我认为没有办法在 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
如果您使用规则网格(例如,如果您有不均匀的列或进行有趣的行交替 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 神奇的方法来构建控制器代码,而不是我想出的方法,但这似乎可以解决问题。