Polimero - mostra/nascondi div dalla carta casella

Question

Provenendo da un background Meteor, mi piacerebbe utilizzare jQuery per mostrare/nascondere un div, con il paper-casella di controllo in questo modo:

HTML:

<paper-checkbox name="remoteLocation" id="remote-chk" checked>Remote Location</paper-checkbox> 
<div id="autoUpdate" class="autoUpdate" style="display: none;">content</div> 

script:

Template.<templateName>.events({ 
    'change #remote-chk' : function(e){ 
     if (e.target.checked) { 
     $('#autoUpdate').fadeOut('slow'); 
     } else { 
     $('#autoUpdate').fadeIn('slow'); 
     } 
    } 
)}; 

Ora, in Polymer 1.0, sto cercando di implementare la stessa cosa:

<link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html"> 
<dom-module id="my-app"> 
<template> 
    <paper-checkbox name="remoteLocation" id="remote-chk" on-click="showMe" checked>Remote Location</paper-checkbox> 
<div id="autoUpdate" class="autoUpdate" style="display: none;">content</div> 
</template> 
<script> 
    Polymer({ 
    is: "my-app", 
    showMe: function() { 
      if (e.target.checked) { 
      $('#autoUpdate').fadeOut('slow'); 
      } else { 
      $('#autoUpdate').fadeIn('slow'); 
      } 

     } 
    }); 
</script> 
</dom-module> 

Qualcuno potrebbe risparmiare un secondo occhio, per favore, come funziona niente? Grazie.

Answer 1

credo transizioni dissolvenza sono ancora in fase sperimentale nei laboratori di polimero (potrei sbagliarmi dura), ma a semplici contenuti Mostra/Nascondi un buon approccio può essere:

in voi index.html

<my-app></my-app> 

hai dato quel componente il nome di mio-app nel tuo esempio

l'nella mia-app.html

<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"> 
<dom-module id="my-app"> 
    <template> 
     <paper-checkbox name="remoteLocation" id="remote-chk" on-click="showMe">Remote Location</paper-checkbox> 
     <div id="autoUpdate" class="autoUpdate" hidden$="{{hide}}">content</div> 
    </template> 
    <script> 
     Polymer({ 
      is: "my-app", 
      properties: { 
       hide: { 
        type: Boolean, 
        value: true // init the value to true so it will be hidden on page load 
       } 
      }, 
      showMe: function() { 
       this.hide = !this.hide 

      } 
     }); 
    </script> 
</dom-module> 

utilizzando i dati di associazione aiutante nascosto

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

è possibile impostare la proprietà nascosto su true e l'ID del div che si desidera nascondere utilizzare

hidden$="{{hide}}" 

la funzione ShowMe poi invertire il booleano a true/false e grazie al collegamento bidirezionale dei dati il ​​contenuto verrà visualizzato

Per la dissolvenza in entrata è possibile utilizzare anche animate.css e utilizzare la sintassi

class$="{{your-class}}" 

Answer 2

È inoltre possibile rimuovere l'attributo hidden in modo dichiarativo e fare semplicemente tutto in modo imperativo.

Ti piace questa:

<div id="autoUpdate" class="autoUpdate">content</div> 
... 
if (e.target.checked) { 
    this.$.autoUpdate.hidden = true; 
} else { 
    this.$.autoUpdate.hidden = false; 
} 

Answer 3

Ebbene questa risposta è piuttosto tardi nondimeno credo che nasconde e che mostra elementi in polimero dovrebbe essere fatto in questo modo.

Un modello specificato come dom-if. Gli elementi al suo interno verranno visualizzati se la proprietà sendInProgress è falsa.

<template is="dom-if" if="{{!sendInProgress}}"> 
      <paper-input id="replyInputField"></paper-input> 
</template> 
<paper-button class="reply-button" on-click="_handleReply">Send</paper-button> 


Polymer({ 
    is: 'hide-elements', 
    properties: { 
    sendInProgress: {value: false, notify: true} 
    }, 
    _handleReply: function() { 

    if (this.sendInProgress){ 
     //Will display element #replyInputField 
     this.set('sendInProgress', false); 
    } else { 
     //Will hide element #replyInputField 
     this.set('sendInProgress', true); 
    } 
    } 


});