javascript - 在 Polymer 元素中使用 JavaScript

Question

我有一个 polymer 对象:

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

但是以上都不起作用。如何访问 polymer 对象中的 dom 元素？

Answer 1

为什么要使用 jQuery，Polymer 已经为您提供了该功能:

• 访问 DOM 元素使用 $ map元素的引用，即获取对 #cancelBtn 的引用

  this.$.cancelBtn

• 添加一个事件处理器使用declarative event mapping ，即向按钮添加点击处理程序

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

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

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

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