Question

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

请问有人请第二只眼睛，因为什么都不行？感谢。

Answer 1

我认为在聚合物实验室中，渐弱的过渡仍然是实验性的（我可能错了）但是对于简单的隐藏/显示内容，一个好方法可以是：

你在index.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>

您在示例中为该组件指定了my-app

你的my-app.html

hidden$="{{hide}}"

使用数据绑定助手隐藏

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

您可以将隐藏属性设置为true，并将要隐藏的div设为id

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

函数showMe然后将布尔值反转为true / false，并且由于双向数据绑定，内容将显示

对于淡入淡出，您甚至可以使用animate.css并使用语法

findInterval()

Answer 2

嗯，这个答案已经很晚了，我认为隐藏和显示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);
    }
  }


});

Answer 3

您还可以声明性地删除<div id="autoUpdate" class="autoUpdate">content</div> ... if (e.target.checked) { this.$.autoUpdate.hidden = true; } else { this.$.autoUpdate.hidden = false; }属性，并且只是必须执行所有操作。

像这样：

Out-String

聚合物 - 通过纸张显示/隐藏div复选框

3 个答案: