我正在从头开始创建一个滑块Web组件来学习。
我想要在属性controlVisible
为false
时隐藏该按钮,并在true
时显示,但我的选择器$('#botaoVoltar')
没有得到任何内容。
我错过了什么?
的index.html:
<body>
<slider-js controlVisible='false' ></slider-js>
</body>
polymer.html:
<polymer-element name="slider-js">
<template>
<center>
<div id="container">
<div id="Buttons">
<button name="voltar" id="botaoVoltar"><<</button>
</div>
</div>
</center>
</template>
</polymer-element>
<script>
Polymer('slider-js', {
controlVisible: false,
ready: function () {
if (this.controlVisible === false) {
$('#botaoVoltar').hide();
} else {
$('#botaoVoltar').show();
}
}
});
</script>
该属性工作正常。如果我console.log
,我可以看到它是true
还是false
,但模板仍会使用按钮呈现。
答案 0 :(得分:1)
jQuery无法访问Polymer的本地DOM,因此您必须使用Polymer自己的DOM API。实际上,Polymer的automatic node finding可以快速访问ID为botaoVoltar
的节点。例如,您可以使用this.$.botaoVoltar
访问示例中的<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<span>With control-visible:</span>
<x-slider control-visible></x-slider>
<span>Without control-visible:</span>
<x-slider></x-slider>
<!-- Normally, you would define this element in its own file. -->
<dom-module id="x-slider">
<template>
<div id="container">
<div id="Buttons">
<button id="botaoVoltar"><<</button>
<button>>></button>
</div>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-slider',
properties : {
controlVisible: {
type: Boolean,
value: false
}
},
ready: function() {
this.$.botaoVoltar.hidden = !this.controlVisible;
}
});
});
</script>
</dom-module>
</body>
按钮。
看起来你正在使用旧的Polymer(1.0之前的版本)。您应该切换到最新版本的Polymer(1.5.0)。这是您的代码升级到最新的Polymer版本:
function truthCheck(collection, pre) {
for(var i=0;i<collection.length;i++){
if(!(pre in collection[i])||collection[i]
[pre]===undefined||isNaN(collection[i]
[pre])||collection[i][pre]===""||
collection[i][pre]===null||collection[i]
[pre]===0)
{
return false;
}
}
return true;
}