Polymer 1.0: guida utilizzando dom-if

Question

Qualcuno può fornire un esempio di implementazione corretta di dom-if?

Nessun esempio di utilizzo corretto è fornito da official documentation. (Spiacenti, non esiste un collegamento diretto. Devi utilizzare il menu in alto a sinistra e selezionare dom-if).

Ecco quello che ho finora. Ovviamente, non sta funzionando.

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

Answer 1

E 'ingombrante, ma si deve fare questo:

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

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

creare esplicitamente una funzione che restituisce true o false.

Answer 2

Credo che il seguente esempio è più o meno semplice e facile da capire/attuazione (non è nel link che hai fornito):

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

dalla pagina .. .

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

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

spero che aiuta S.

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>