12

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>
Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207

3 Answers3

30

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.

Iain J. Reid
  • 978
  • 1
  • 11
  • 23
agektmr
  • 2,144
  • 15
  • 14
  • 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! =] – Let Me Tink About It Jul 20 '15 at 09:52
  • Also, I don't think you can pass an argument to a function like that? Can you? [See this question](http://stackoverflow.com/questions/31441401/polymer-1-0-is-there-a-way-to-pass-an-argument-to-a-polymer-function-from-an-at). – Let Me Tink About It Jul 20 '15 at 10:16
  • You can pass in arguments to computed bindings if you declare them as properties. In the [documentation](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#annotated-computed) it says " Arguments can be dependent properties or string or number literals." – Maria Jul 20 '15 at 13:55
  • Thanks for the boost @Maria. You are correct. You both are. I made a dumb typo. Answer accepted. – Let Me Tink About It Jul 20 '15 at 18:23
  • how to pass 2 args in _actionIsLogin() function when dom-if is inside dom repeat?? I tried but it didn't work!! like – ksh Jul 22 '17 at 07:42
  • 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) – ksh Jul 22 '17 at 07:48
4

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.

Zohar81
  • 4,554
  • 5
  • 29
  • 82
  • 1
    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! =] – Let Me Tink About It Jul 20 '15 at 09:49
1
<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>
Cesar SC
  • 19
  • 7