javascript 聚合物 - 通过纸复选框显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31770295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Polymer - show/hide div by paper-checkbox
提问by Sylar
Coming from a Meteor background, I'd use JQuery to show/hide a div, with paper-checkbox like so:
来自 Meteor 背景，我会使用 JQuery 来显示/隐藏一个 div，带有像这样的纸复选框：
HTML:
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');
}
}
)};
Now, in Polymer 1.0, I am trying to implement the same thing:
现在，在 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>
Could someone spare a second eye, please, as nothing works? Thanks.
有人可以多看两眼吗，因为没有任何作用？谢谢。
回答by Matteo Hertel
I believe fading transitions are still experimental in the polymer labs (I might be wrong tough) but to simple hide/show content a good approach can be :
我相信褪色过渡在聚合物实验室中仍然是实验性的（我可能错了）但是为了简单的隐藏/显示内容，一个好的方法可以是：
in you index.html
在你 index.html
<my-app></my-app>
you gave that component the name my-app in your example
您在示例中将该组件命名为 my-app
the in your my-app.html
在你的 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>
using the data binding helper hidden
使用隐藏的数据绑定助手
https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if
https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if
you can set the property hidden to true and id the div you want to hide use
您可以将属性 hidden 设置为 true 并标识要隐藏的 div 使用
hidden$="{{hide}}"
the function showMe will then invert the boolean to true/false and thanks to the two way data binding the content will show up
然后，函数 showMe 会将布尔值反转为 true/false，并且由于采用了两种数据绑定方式，内容将显示出来
For the fade in you can even use animate.css and use the syntax
对于淡入，您甚至可以使用 animate.css 并使用语法
class$="{{your-class}}"
回答by Jonathan Andersson
Well this answer is pretty late none the less I think hiding and showing elements in Polymer should be done like this.
好吧，这个答案已经很晚了，但我认为在 Polymer 中隐藏和显示元素应该这样做。
A template specified as a dom-if. The elements inside it will be displayed if property sendInProgress is false.
指定为 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);
}
}
});
回答by Let Me Tink About It
You can also remove the hiddenattribute declaratively and just do everything imperatively.
您还可以hidden声明性地删除该属性，然后强制执行所有操作。
Like this:
像这样：
<div id="autoUpdate" class="autoUpdate">content</div>
...
if (e.target.checked) {
this.$.autoUpdate.hidden = true;
} else {
this.$.autoUpdate.hidden = false;
}
