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

Question

I'm creating a slider web component from scratch to learn. 我正在从头开始创建一个滑块Web组件以进行学习。

I want the button to hide when the attribute controlVisible is false and show when it's true , but my selector $('#botaoVoltar') doesn't get anything. 我想按钮隐藏当属性controlVisible是false ，并显示当它是true ，但我选择$('#botaoVoltar')没有得到任何东西。

What am I missing? 我想念什么？

index.html: index.html：

<body>
    <slider-js controlVisible='false' ></slider-js>
</body>

polymer.html: 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>

The attribute is working fine. 该属性工作正常。 If I console.log it, I can see if it is true or false , but the template still renders with the button. 如果我console.log它，我可以看到它是true还是false ，但是模板仍然显示带有按钮。

Answer 1

jQuery can't get at Polymer's local DOM, so you'd have to use Polymer's own DOM API . jQuery无法到达Polymer的本地DOM，因此您必须使用Polymer自己的DOM API 。 Actually, Polymer's automatic node finding provides quick access to nodes that have IDs with this.$ . 实际上，Polymer的自动节点查找功能可以快速访问ID为this.$节点。 For instance, you could access the botaoVoltar button in your example with this.$.botaoVoltar . 例如，您可以使用this.$.botaoVoltar访问示例中的botaoVoltar按钮。

It looks like you're using old Polymer (pre 1.0). 看来您使用的是旧版Polymer（1.0之前的版本）。 You should switch to the latest version of Polymer (1.5.0). 您应该切换到最新版本的Polymer（1.5.0）。 Here's your code upgraded to the newest Polymer version: 这是您的代码已升级到最新的Polymer版本：

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

^codepen ^码笔

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-22 12:10:32

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-22 12:10:32

解决方案1
1 已采纳 2016-06-22 12:10:32