Polymer - Ein-/Ausblenden div von Papier-Checkbox

Question

von einem Meteor Hintergrund kommt, würde ich JQuery verwenden, um ein-/auszublenden ein div, mit Papier-Kästchen wie folgt:

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'); 
     } 
    } 
)}; 

nun in Polymer 1.0, ich versuche, die gleiche Sache zu implementieren:

<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> 

Könnte jemand ein zweites Auge schonen, bitte, nichts funktioniert? Vielen Dank.

Answer 1

Ich glaube Verblassen Übergänge noch experimentell in den Polymer Labors sind (ich könnte falsch hart sein), sondern auf einfache hide/show Inhalt ein guter Ansatz sein kann:

in Ihnen

<my-app></my-app> 

index.html

haben Sie diese Komponente den Namen my-app in Ihrem Beispiel

die in Ihrem my-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> 

die Daten unter Verwendung von Helfer

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

versteckt Bindung können Sie die Eigenschaft der div Sie verbergen wollen wahr und id versteckt

hidden$="{{hide}}" 

die Funktion showme die boolean invertieren dann verwenden, um True/False und dank der Zwei-Wege-Datenbindung wird der Inhalt angezeigt

Für die Einblendung können Sie sogar animate.css verwenden und verwenden Sie die Syntax

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

Answer 2

Sie können das Attribut hidden auch deklarativ entfernen und einfach alles unbedingt tun.

So:

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

Answer 3

Nun diese Antwort ist ziemlich spät nichtsdestoweniger Ich denke, versteckt und Elemente in Polymer zeigen sollte wie folgt durchgeführt werden.

Eine Vorlage, die als dom-if angegeben wird. Die Elemente darin werden angezeigt, wenn die Eigenschaft sendInProgress falsch ist.

<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); 
    } 
    } 


});