Conditional template on Polymer 1.0

Question

I'm having trouble applying the new conditional template, in particular with the condition itself, I think.

I've got something like this:

<template is="dom-repeat" items="{{menuitems}}" as="poscol">
    <template is="dom-if" if="{{index != 4}}">
        <div class="positioncolum horizontal layout center wrap flex">
            <span>{{index}}</span>
            <template is="dom-repeat" items="{{poscol}}" as="mitem" >
               <main-menu-item mitem="{{mitem}}"
                   order="{{mitem.TotalOrder}}"
                   onclick="clickMainMenuMod(index)">
               </main-menu-item>
            </template>
       </div>
   </template>
</template>

Now, if I comment the <template is="dom-if" if="{{index != 4}}"> bit it works fine, the index shows as it should. On the fourth array are stored modules that the user has selected as non-visible, so they shouldn't appear on the main menu.

I guess there's something wrong with the if condition, but I can't guess what.

Thanks!

Shrubby

Answer 1

Try to modify your conditional template like this:

<template is="dom-if" if="{{show(index)}}">

And add this function to Polymer script:

show: function (index) {
    return index != 4;
}

Togs

I assume I can't do that outside a polymer element – Shrubby

I've tried this, but since my template is not in a custom element, but in the index page, I don't know how to make this work... – Shrubby

@Shrubby Then make custom element. Some inspiration: jsbin.com/zovolineke/1/edit?html,output – Togs

I was trying not to make a custom-element for something I only use once on my application, but it looks like the only way to go. Thanks :) – Shrubby

You don't have to make a full custom-element, but if you want to use binding syntax (that is {{ }}) you have to at least use a dom-bind template (polymer-project.org/1.0/docs/devguide/templates.html#dom-bind). – Antidote

Also, instead of using if="{{...}}" you could write javascript to set the if property of the template however/whenver you like. – Antidote