web-dev-qa-db-ja.com

Polymer-紙でdivを表示/非表示-チェックボックス

Meteorのバックグラウンドから来たので、JQueryを使用してdivを表示/非表示にし、次のような紙のチェックボックスを使用します。

HTML：

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

スクリプト：

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

今、Polymer 1.0で、私は同じことを実装しようとしています：

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

何も機能しないので、誰かが第二の目を惜しまないでください。ありがとう。

javascriptjqueryhtmlpolymerpolymer-1.0
8
Sylar

polymer labs（私は間違っているかもしれません）ではフェージングトランジションはまだ実験的だと思いますが、コンテンツを単純に非表示/表示するには、次のような方法があります。

あなたのindex.html

<my-app></my-app>

例では、そのコンポーネントにmy-appという名前を付けました

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>

非表示のデータバインディングヘルパーを使用する

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

非表示のプロパティをtrueに設定し、非表示にするdivをidで使用できます。

hidden$="{{hide}}"

次に、関数showMeはブール値をtrue/falseに反転し、双方向のデータバインディングのおかげで、コンテンツが表示されます。

フェードインには、animate.cssを使用して構文を使用することもできます

class$="{{your-class}}"
13
Matteo Hertel

Polymer）で要素を非表示にしたり表示したりすることは、このように行う必要があると思いますが、この答えはかなり遅いです。

Dom-ifとして指定されたテンプレート。プロパティsendInProgressがfalseの場合、その中の要素が表示されます。

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


});
3
Jonathan Andersson

hidden属性を宣言的に削除して、すべてを命令的に実行することもできます。

このような：

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