CODEWITHSUNDEEP
ember.jshandlebars.js
ajeh
ajeh

Reputation: 2784

Ember 3 conditional statement

Why while this code does render,

{{#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}}

this does not?

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

The last snippet emits <ol></ol> before the list and no closing tag after the list:

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

and why does this code not even compile?

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

Error:

Unclosed element ol (on line 2).

Upvotes: 0

Views: 84

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

I am writing the code what PatsyIssa mentioned in his comments,

Create component named ordered-list.

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

In ordered-list.hbs,

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

For the eq helper you need to install ember-truth-helpers addon or create your own helper that simply compares values.

Upvotes: 3

Related Questions