Question

我有一个聚合物的对象：

<newfolder-element id="newfolderelement" popupStyle="width: 362px; height: 100px;">
    <span class="title">Utwórz nowy folder</span>
    <input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
    <br />
    <button class="action blue"><span class="label">Utwórz</span></button>
    <button class="action red" id="cancelBtn"><span class="label">Anuluj</span></button>

        <script type="text/javascript">
            ...
        </script>

</newfolder-element>

我想在javascript中访问dom元素，我试过这个：

<script type="text/javascript">

                    Polymer('newfolderelement', {
                        domReady : function(){
                            $(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
                                console.log("clicked");
                            });
                        }
                    });
</script>

而且：

<script type="text/javascript>
                    $(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
                        console.log("clicked");
                    });

</script>

而且：

<script type="text/javascript>
                    $("#cancelBtn").click(function(){
                        console.log("clicked");
                    });

</script>

但以上所有都不起作用。如何访问聚合物对象内的dom元素？

Answer 1

为什么要使用jQuery，Polymer已经为您提供了这个功能：

访问DOM元素使用元素的$ map，即引用#cancelBtn使用

此。$。cancelBtn
使用declarative event mapping添加事件处理程序，即向按钮添加点击处理程序

<button class="action red" id="cancelBtn" on-click="{{cancelClicked}}"></button>

只需将方法cancelClicked添加到组件的脚本部分。

  <script>
    Polymer('newfolder-element', {
      cancelClicked: function() {
         // do something
      }
    });
  </script>

这更简单，您的组件不需要额外的库。

在Polymer元素中使用JavaScript

1 个答案: