Polymer 1.0: Help using dom-if

Question

Can someone please provide an example of proper implementation of dom-if?

No example of proper usage is provided by the official documentation. (Sorry there is no direct link. Must use menu in upper left and select dom-if).

Here is what I have so far. Obviously, it is not working.

<template>
  ...
  <template is="dom-if" if="{{action}}=='Login'">
       <!-- Also tried: if="{{action=='Login'}}" -->
    <a href="#">Forgot password?</a>
  </template>
  ...
</template>

Fiber

Another example of very poor documentation from Google! – Distrustful

Answer 1

It's cumbersome, but you have to do this:

<template is="dom-if" if="[[_actionIsLogin(action)]]">
  <a href="#">Forgot password?</a>
</template>

<script>
  Polymer({
    ...
    _actionIsLogin: function(action) {
      return action === 'Login';
    }
    ...
  });
</script>

Explicitly create a function that returns either true or false.

Exemplar

This is helpful because it got me thinking about an imperative approach. So, upvoted! But can't accept yet because this particular code doesn't work. Feel free to modify it! I will. Thanks! =] – Fiber

Also, I don't think you can pass an argument to a function like that? Can you? See this question. – Fiber

You can pass in arguments to computed bindings if you declare them as properties. In the documentation it says " Arguments can be dependent properties or string or number literals." – Woll

Thanks for the boost @Maria. You are correct. You both are. I made a dumb typo. Answer accepted. – Fiber

how to pass 2 args in _actionIsLogin() function when dom-if is inside dom repeat?? I tried but it didn't work!! like – Lareine

how to pass 2 args in _actionIsLogin() function when dom-if is inside dom repeat?? I tried but it didn't work!! like demo (just consider logic,ignore syntax) <dom repeat><dom-if if="{{_actionIsLogin(item.arg1,item.arg2)}}"> – Lareine

Answer 2

i think that the following example is pretty much straight forward and easy to understand/implement (it's not in the link you've provided):

https://www.polymer-project.org/1.0/docs/devguide/templates.html

from the page ...

<div>{{user.name}}</div>

<template is="dom-if" if="{{user.isAdmin}}">
  Only admins will see this.
  <div>{{user.secretAdminStuff}}</div>
</template>
...

hope it helps.

Leenaleeper

It helps because you showed me additional documentation. So, upvoted! But it does not answer the question because I am trying to evaluate a boolean expression where you just have a simple boolean value with user.isAdmin. The expression evaluation is the trick here and an essential part of the question. No answer has been accepted yet so please feel free to try again! =] – Fiber

Answer 3

<template>
    <iron-ajax           
            auto
            url="https://jsonplaceholder.typicode.com/todos"
            handle-as="json"
            last-response="{{baul}}">
    </iron-ajax>

    <template is="dom-repeat" items="{{baul}}" >
        <template is="dom-if" if="{{item.completed}}">{{item.title}} is completed<br></template>
    </template>


</template>

Firecure