Polymer: Feature request: <dom-if-else>

[nazar-pc]

Very often I encounter that I need not only if, but also else, while combination of two ifs is quite ugly and violates DRY principle.
I suggest to add <dom-if-else> for such cases.
Namely, instead of:

<template is="dom-if" if="{{condition}}">
    <p>P1</p>
</template>
<template is="dom-if" if="{{!condition}}">
    <p>P2</p>
</template>

I'd like to have:

<template is="dom-if-else" if="{{condition}}">
    <p>P1</p>
    <p>P2</p>
</template>

More complex cases can be handled in such way:

<template is="dom-if-else" if="{{condition}}">
    <template>
        <p>P1</p>
        <p>sub-P1</p>
    </template>
    <template>
        <p>P2</p>
        <p>sub-P2</p>
    </template>
</template>

<template> or any other element can be used to wrap more than one element, rule is simple:

• [is=dom-if-else] > :nth-child(1): if branch
• [is=dom-if-else] > :nth-child(2): else branch

[redjar]

+1

[Trakkasure]

See: https://github.com/Trakkasure/dom-else

[nazar-pc]

@Trakkasure, I remember it, probably, from Slack channel, but it doesn't have as compact syntax as described here.
It does allow to avoid condition duplication, but still very verbose in simple cases.

[Trakkasure]

Ok. You asked for it.. so here it is:
https://github.com/Trakkasure/dom-if-else

[redjar]

@Trakkasure Thanks!

[redjar]

Just tried to use it today. Doesn't work well in Polymer 1.0 at least.

[Trakkasure]

I integrated a bunch of tests from dom-if.... Let me know what is going wrong so I can test better.

[Trakkasure]

Leave issues on the dom-if-else repo: https://github.com/Trakkasure/dom-if-else/issues

[Trakkasure]

Tests added to it.

[tomalec]

:+1:

[MeTaNoV]

+1

[MeTaNoV]

What about this kind of syntax where "else if" could be introduced:

<template is="dom-if" if="{{condition1}}">
    <p>P1</p>
</template>
<template is="dom-else-if" else-if="{{condition2}}">
    <p>P2</p>
</template>
<template is="dom-else">
    <p>P3</p>
</template>

[Trakkasure]

this is no different than negating the original condition with another
dom-if template.

On Thu, Nov 12, 2015 at 8:31 AM, Pascal Gula [email protected]
wrote:

What about this kind of syntax where "else if" could be introduced:

—
Reply to this email directly or view it on GitHub
https://github.com/Polymer/polymer/issues/2165#issuecomment-156116396.

[kunhimohamed]

+1

[chimarcos]

+1
On Dec 29, 2015 10:28 PM, "kunhimohamed" [email protected] wrote:

+1

—
Reply to this email directly or view it on GitHub
https://github.com/Polymer/polymer/issues/2165#issuecomment-167944904.

[image: CHI Logo]Cultural Homestay International (CHI)Toll Free:
1-800-432-4643Website: chinet.orgCHI Blog https://chinet.org/blog/ |
Facebook https://www.facebook.com/CulturalHomestayInternational | YouTube
https://www.youtube.com/user/chinetorg | Twitter
https://twitter.com/CHI_News

[fabianbormann]

+1

[allenmoatallen]

+1

[krozycki]

+1

[Warrenty]

+1

[kzahel]

+1

[krozycki]

Is there any progress on this?

[qertis]

+1

[arthurevans]

I don't think the team has any intention of adding this to Polymer itself. The template helper elements are fairly complex and adding a new one would add weight and maintenance cost to the core library. The first proposal here (https://github.com/Polymer/polymer/issues/2165#issue-97821923) only saves two lines of code and would add significant complexity (because you can no longer assume that the stamped content of the dom-if is the same as the template content, which is the case for all other template helpers).

That said, Custom Elements v1 is going to force a refactor of the template helpers. Perhaps this feature would make more sense then? Looking at you, @kevinpschaaf

[TimvdLippe]

I think the main benefit of this element is the performance improvement. The condition only has to be computed once instead of twice. Moreover, the element knows that it will swap in different content and possibly optimize this behavior too. The reading and maintenance benefits are a nice addition too.

[HaykoKoryun]

:+1:

I agree that it will make template parsing more complex than it already is, however on a page with multiple polymer elements you would probably see a performance improvement when the number of conditions need to be checked reduces as a result of using elses. Although once you implement this, then someone's going to suggest adding a dom-switch :laughing:

[ziagrosvenor]

+1

[jake32321]

+1

[nealgist]

+1

[pchapman]

That suggested syntax looks an awful lot like iron-pages. Perhaps iron-pages would work as a short-term solution while an official solution is being worked on? Just an idea.

[jimmyvithalani]

+1

[hyyan]

+1

[svantetobias]

+1

[QuackMartins]

I don't think this is a good idea, <dom-if> already does what it's intended to do
It's more obvious implementing a <dom-switch>

_Remember, do only one thing... and do it well_

[cmevawala]

+1

[benesjan]

+1

[vedtam]

+1

[hyyan]

+1

[nazar-pc]

Please, no more +1. If you want to express support click 👍 button under the first comment. Thanks.

[jake32321]

Yes please for the love of god lol.

[alexpirine]

+1

[danielvanmil]

+1

[priolo22]

<template is="dom-switch">
    <template is="dom-case" case="{{condition1}}">
      ...
    </template>
    <template is="dom-case" case="{{condition2}}">
       ...
    </template>
    <template is="dom-default">
       ...
    </template>
</template>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.