Question

为什么这段代码会渲染，

{{#if ordered}}
<ol>
  {{#each things as |thing|}}
    <li {{action "showThing" thing}}>{{thing}}</li>
  {{/each}}
</ol>
{{else}}
<ul>
  {{#each things as |thing|}}
    <li {{action "showThing" thing}}>{{thing}}</li>
  {{/each}}
</ul>
{{/if}}

这不是吗？

{{{if ordered "<ol>" "<ul>"}}}
  {{#each things as |thing|}}
    <li {{action "showThing" thing}}>{{thing}}</li>
  {{/each}}
{{{if ordered "</ol>" "</ul>"}}}

最后一个代码段在列表前面发出<ol></ol>，在列表后面没有结束标记：

<div id="ember260" class="ember-view"><h2>Ordered List Of Things</h2>
<ol></ol>
    <li data-ember-action="" data-ember-action-261="261">yarn</li>
    <li data-ember-action="" data-ember-action-262="262">feathers</li>
    <li data-ember-action="" data-ember-action-263="263">dinner plate</li>
    <li data-ember-action="" data-ember-action-264="264">sheep</li>
</div>

为什么这段代码甚至不能编译？

{{#if ordered}}
<ol>
{{else}}
<ul>
{{/if}}
  {{#each things as |thing|}}
    <li {{action "showThing" thing}}>{{thing}}</li>
  {{/each}}
{{#if ordered}}
</ol>
{{else}}
</ul>
{{/if}}

错误：

未封闭元素ol（第2行）。

Answer 1

我正在编写PatsyIssa在评论中提到的代码，

创建名为ordered-list的组件。

{{ordered-list tagName=(if (eq ordered 'ol' 'ul')) things=things showThings=(action 'showThings')}}

在ordered-list.hbs中，

{{#each things as |thing|}}
    <li {{action showThing thing}}>{{thing}}</li>
{{/each}}

对于eq帮助程序，您需要安装ember-truth-helpers个插件或创建自己的帮助程序，只需比较值。

Ember 3条件陈述

1 个答案: