如何通过传递param属性来更改聚合物元素模板

时间:2016-06-22 10:58:35

标签: javascript jquery polymer web-component

我正在从头开始创建一个滑块Web组件来学习。

我想要在属性controlVisiblefalse时隐藏该按钮,并在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,但模板仍会使用按钮呈现。

1 个答案:

答案 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">&lt;&lt;</button> <button>&gt;&gt;</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;
}

codepen