How do I write condition in polymer1.0 with "dom-if"?

Question

I have below code:

<template is="dom-if" if="{{item.hasAttach}}">
     <i class="fa fa-paperclip"></i>
</template>

item.hasAttach = true/false

But I want to check condition in this if like : item.content_format_code == 'PDF'

<template is="dom-if" if="{{item.content_format_code == 'PDF'}}">
         <i class="fa fa-pdf"></i>
    </template>
<template is="dom-if" if="{{item.content_format_code == 'JPEG'}}">
         <i class="fa fa-jpg"></i>
    </template>
<template is="dom-if" if="{{item.content_format_code == 'xls'}}">
         <i class="fa fa-xls"></i>
    </template>

it should be like {{item.content_format_code == 'PDF'}} = true/false But it is not testing this. I want to show icon as per file type. item.content_format_code == 'PDF' this is not checked true/false. In polymer it takes only true/false as a conditional actual value but don't check expression. Please Help me.

Answer 1

You can use computed bindings.

Define a function that computes the expression and bind it to the dom-if.

<template is="dom-if" if="[[isFormat(item.content_format_code, 'PDF')]]">
     <i class="fa fa-pdf"></i>
</template>

Polymer({
    is: "my-element",
    isFormat: function(code, format) {
        return code === format;
    }
});

Answer 2

Currently, polymer only supports simple constructs for conditions. This means that you can't write something like

[[ item.something == 'CONDITION' ]]

You are left with 2 choices:

1. The item used for the condition is a boolean, than simply writing

   [[ item ]]
   

   or

   [[ !item ]]
   

   will work. The only operator you can use is '!'

2. With more complex conditions, use computed bindings:

   [[ _computeResult(item) ]]