How to use template 'if' binding to show element properties inside a repeating template.

1k views Asked by At

curious about using if within the template. Say I have an array of objects that I only want to show if the item has a certain property I've tried the following but believe I have the syntax wrong... should I just weed the property as another property?

 <template is="dom-repeat" items="{{data.entries}}">
   <div class="list" >
     <paper-item class="horizontal layout">
       <paper-item-body two-line class="flex">

         <template bind if="{{item.title}}">
           <div><span>{{item.title}}</span></div>
         </template>

         <div><span>{{item.text}}</span></div>
         <div secondary>
          <template is="dom-repeat" items="{{item.automation}}">
            <span>{{item.full}}</span>
          </template>
         </div>
       </paper-item-body>
     </paper-item>
  </div>
</template>
1

There are 1 answers

2
davidbates On

Solved this over on the polymer slack channel. The problem was that when item.title didn't exist it wouldn't execute the if statement at all. so the solution was to use compute ie:

<template is="dom-if" if="{{filterTitle(item)}}">

and JS

filterTitle: function(item)  { return Boolean(item.title); }

This solution is very flexible and when the item is null the template will not be shown as expected. Thanks users SJMILES, PEDUXE, and MBARNEY (polymer slack) for helping me sort this out.