Polimer - Bir meteor kökenli geliyor kağıt onay kutusunun

Question

tarafından göstermek/gizlemek div, ben şöyle kağıt onay kutusu, bir div/gizlemek için JQuery kullanmak:

HTML:

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

Senaryo: Artık

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

, Polymer 1.0, ben de aynı şeyi uygulamak çalışıyorum: hiçbir şey işe olarak

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

birisi, ikinci bir göz, lütfen ayırabilir misiniz? Teşekkürler.

Answer 1

ben solan geçişler (Ben yanlış zor olabilir) polimer laboratuvarlarında halen deneysel inanıyoruz ama basit gizlemek/göstermek içeriğe iyi bir yaklaşım olabilir:

sen index.html içinde

<my-app></my-app> 

Eğer örnekte Adını my-app o bileşeni verdi

sorumlusu da ben-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> 

yılında yardımcı

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

gizli bağlama verileri kullanarak

true ve id gizli özelliğini ayarlayın gizlemek istediğiniz div işlevi ShowMe ardından boole'sini ters olacak

hidden$="{{hide}}" 

kullanabilirsiniz true/false ve içeriğe bağlanan iki yönlü veri sayesinde

İçerisinde kaybolmak için animate.cs'leri kullanabilir ve sözdizimini kullanabilirsiniz

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

Answer 2

Ayrıca, hidden özniteliğini de belirtebilir ve yalnızca zorunlu olarak her şeyi yapabilirsiniz. Bunun gibi

:

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

Answer 3

Eh bu cevabı oldukça geç hiçbiri az Saklanmıyordum ve böyle yapılmalı Polymer öğeleri gösteren düşünüyorum edilir.

Dom-if olarak belirtilen bir şablon. PropertyInInProgress özelliği false ise, içindeki öğeler görüntülenecektir.

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


});