Checkbox Polymer1.0中自定义创建的切换开关不适用于多个实例
导入Polymer 1.0.0并创建了一个自定义控件,该控件根据“切换”值(无论启用还是禁用)切换和显示文本。 当我多次使用此元素时,文本没有正确更改。 仅对第一个实例有效,其余实例文本不会更改。在切换开关的两种状态下,它都保持为禁用状态Checkbox Polymer1.0中自定义创建的切换开关不适用于多个实例,checkbox,polymer,polymer-1.0,togglebutton,multiple-instances,Checkbox,Polymer,Polymer 1.0,Togglebutton,Multiple Instances,导入Polymer 1.0.0并创建了一个自定义控件,该控件根据“切换”值(无论启用还是禁用)切换和显示文本。 当我多次使用此元素时,文本没有正确更改。 仅对第一个实例有效,其余实例文本不会更改。在切换开关的两种状态下,它都保持为禁用状态 <link rel="import" href="../bower_components/polymer/polymer.html" /> <dom-module id="toggle-element"> <style&g
<link rel="import" href="../bower_components/polymer/polymer.html" />
<dom-module id="toggle-element">
<style>
#labelDisplay {
height: 14px;
width: 43px;
color: #4d4d4d;
font-family: Roboto;
font-size: 12px;
line-height: 14px;
margin-left: 6px;
}
.switch {
position: relative;
display: inline-block;
width: 41px;
height: 16px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cacaca;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
/* Slider Round */
position: absolute;
content: "";
height: 12.5px;
width: 12.5px;
top: 1px;
background-color: white;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider {
background-color: #329b46;
}
input:focus + .slider {
box-shadow: 0 0 1px #329b46;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 40px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<template>
<label class="switch">
<input type="checkbox" id="checkInput" on-change="setValue" />
<span class="slider round"></span>
</label>
<span id="labelDisplay">Disabled</span>
</template>
下面是自定义元素脚本文件,它根据切换开关值处理启用/禁用的文本显示
<script>
Polymer({
is: "toggle-element",
properties: {
status: String,
},
setValue: function () {
//Changes checkbox label based on checkbox value
// Get status of toggle switch (Id : status) &
// Set label text value respectively (Id : value)
[
document.getElementById("labelDisplay").innerHTML,
this.status,
] = document.getElementById("checkInput").checked
? ["Enabled", "true"]
: ["Disabled", "false"];
},
});
</script>
</dom-module>
问题在于使用函数更新span标记中的字符串“Enabled/Disabled”。我认为这个过程是所有实例共享的,而不是有自己的
因此,我通过使用dom if改变了方法
应该让状态值返回一个函数,否则所有切换元素都有更改值的风险。例如value:false应该是value:function{return false;}。感谢@RickardElimää的澄清。
<link rel="import" href="../bower_components/polymer/polymer.html" />
<dom-module id="toggle-element">
<style>
#labelDisplay {
height: 14px;
width: 43px;
color: #4d4d4d;
font-family: Roboto;
font-size: 12px;
line-height: 14px;
margin-left: 6px;
}
.switch {
position: relative;
display: inline-block;
width: 41px;
height: 16px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cacaca;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
/* Slider Round */
position: absolute;
content: "";
height: 12.5px;
width: 12.5px;
top: 1px;
background-color: white;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider {
background-color: #329b46;
}
input:focus + .slider {
box-shadow: 0 0 1px #329b46;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 40px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<template>
<label class="switch">
<input type="checkbox" id="checkInput" checked="{{status::input}}" />
<span class="slider round"></span>
</label>
<template is="dom-if" if="[[!status]]"
><span id="labelDisplay">Disabled</span></template
>
<template is="dom-if" if="[[status]]"
><span id="labelDisplay">Enabled</span></template
>
</template>
<script>
Polymer({
is: "toggle-element",
properties: {
status: {
value: false,
type: Boolean,
},
},
});
</script>
</dom-module>
<template>
<label class="switch">
<input type="checkbox" id="checkInput" checked="{{status::input}}" />
<span class="slider round"></span>
</label>
<template is="dom-if" if="[[!status]]"
><span id="labelDisplay">Disabled</span></template
>
<template is="dom-if" if="[[status]]"
><span id="labelDisplay">Enabled</span></template
>
</template>