Question

我的网络组件（聚合物1.0）更改了使用＆lt; content＆gt;给出的light-DOM并尝试将点击转换为自定义事件。

<link rel="import" href="path/to/polymer.html">
<dom-module id="x-custom">
    <template>
        <content></content>
        <!-- used this way <x-custom><div></div></x-custom> -->
    </template>

    <script>
    (function() {

        function init() {
            var myRoot = Polymer.dom(this);
            var firstDiv = myRoot.querySelectorAll("div")[0];
            var itemDiv = document.createElement("div");
            itemDiv.textContent = "Yadda";
            firstDiv.appendChild(itemDiv);

            itemDiv.addEventListener("click", follow);

        }

        function follow()
        {
            console.log("follow");
            Polymer.fire("custom-event");
        }

        Polymer({
            is: 'x-custom',
            ready: init
        });

    })();
    </script>
</dom-module>

它告诉我Polymer没有功能火。调用此方法的正确方法是什么？可能也有一些反模式......

Answer 1

Polymer对象中没有fire方法。 fire方法在Polymer.Base中，但除非声明原型，否则不能直接使用它，因此需要this。您可以通过打开开发工具并键入Polymer后跟一个点来查看所有聚合物属性和方法。

总之，您应该使用this.fire。

<dom-module id="x-custom">
    <template>
        <content></content>
        <!-- used this way <x-custom><div></div></x-custom> -->
    </template>

    <script>
    (function() {

        function init() {
            var myRoot = Polymer.dom(this);
            var firstDiv = myRoot.querySelectorAll("div")[0];
            var itemDiv = document.createElement("div");
            itemDiv.textContent = "Yadda";
            firstDiv.appendChild(itemDiv);

            itemDiv.addEventListener("click", follow.bind(this));  // notice the .bind here

        }

        function follow()
        {
            console.log("follow");
            this.fire("custom-event");
        }

        Polymer({
            is: 'x-custom',
            ready: init
        });

    })();
    </script>
</dom-module>

Answer 2

您需要将功能放在主Polymer()功能中。由于Polymer()函数不在init()函数的范围内，因此抛出错误。您还需要在Polymer()函数中声明您在模板中使用的所有自定义属性。

像这样：

<link rel="import" href="path/to/polymer.html">
<dom-module id="x-custom">
  <template>
    <content></content>
    <!-- used this way <x-custom><div></div></x-custom> -->
  </template>
  <script>
    (function() {
      Polymer({
        is: 'x-custom',
        properties: {
          customProperty1: {
            type: String
          },
          customProperty2: {
            type: String
          }
        },
        ready: function() {
          var myRoot = Polymer.dom(this);
          var firstDiv = myRoot.querySelectorAll("div")[0];
          var itemDiv = document.createElement("div");
          itemDiv.textContent = "Yadda";
          firstDiv.appendChild(itemDiv);
          itemDiv.addEventListener("click", follow);
        },
        follow: function() {
          console.log("follow");
          Polymer.fire("custom-event");
        }
      });
    })();
  </script>
</dom-module>

Polymer.fire不是一个功能

2 个答案:

像这样：