Question

我在普通的Polymer Elements中加载Javascript时遇到问题：

这是在没有聚合物的情况下执行时完美无缺的测试代码：

 <body>
    <style>
    #content {background-color: #f2f2f2;}
    #button {padding: 10px 20px;}
    </style>

    <div id="content">
        <h1 id="title">Title</h1>

        <p>This example uses the addEventListener() method to attach a click event to the document.</p>


        <button id="button">Testbutton</button>
    </div>

    <script>
        function popup2() {
            alert("What's up brow?");
            console.log("deine mudda");
        };

        var button = document.getElementById("button");
        button.addEventListener("click", popup2, false);
    </script>
</script>

</body>

但是我想在Polymer Elements中使用Javascript并尝试了以下插入：

NR。 1：脚本标签内的Javascript，在模板标签之后：

 <polymer-element name="my-element">

    <template>
        <style>
        #content {background-color: #f2f2f2;}
        #button {padding: 10px 20px;}
        </style>

        <div id="content">
            <h1 id="title">Title</h1>

            <p>This example uses the addEventListener() method to attach a click event to the document.</p>


            <button id="button">Testbutton</button>
        </div>

    </template>

    <script>
        Polymer('my-element', {
            popup: function() {
                alert('What the... dude?');
            },

            var button = document.getElementById("button");
            button.addEventListener("click", popup, false);

        });
    </script>

</polymer-element>

这不起作用。我在firefox中收到错误消息：“SyntaxError：missing：after property id。 Chrome反而说：“SyntaxError：Unexpected Identifier”。

指向“var button = document.getelementById（”button“）;

行的指针

根据Polymer Documentation，javascript应该放在文件的末尾： https://www.polymer-project.org/docs/start/tutorial/step-1.html

因此，在第二次尝试中，我将我的Javascript直接放在模板标签中，如下所示：

<polymer-element name="my-element">

    <template>
        <style>
        #content {background-color: #f2f2f2;}
        #button {padding: 10px 20px;}
        </style>

        <div id="content">
            <h1 id="title">Title</h1>

            <p>This example uses the addEventListener() method to attach a click event to the document.</p>


            <button id="button">Testbutton</button>
        </div>

        <script>
            function popup() {
                alert("jajaja");
            };

            var button = document.getElementById("button");
            button.addEventListener("click", popup, false);
        </script>

    </template>

    <script>
        Polymer('my-element', {


        });
    </script>

</polymer-element>

但这次我得到：“未捕获的TypeError：无法读取属性'addEventListener'的null”，它将agian指向我写的行：“button.addEventListener（”click“，popup，false）;”。< / p>

我猜这意味着，编译器无法看到按钮ID，因为它位于Shadow-Dom中？

请指导我。

Answer 1

<polymer-element name="my-element">

  <template>
    <style>
    #content {background-color: #f2f2f2;}
    #button {padding: 10px 20px;}
    </style>

    <div id="content">
        <h1 id="title">Title</h1>

        <p>This example uses the addEventListener() method to attach a click event to the document.</p>


        <button on-tap="{{popup}}">Testbutton</button>
    </div>

  </template>

  <script>
    Polymer('my-element', {
        popup: function() {
            alert('alert');
        }
    });
  </script>

</polymer-element>

在聚合物元素中，您可以使用on-tap =＆＃34; {{function}}＆＃34;直接绑定到函数。属性。

编辑：所有代码都没有进入阻止

在js方法中保留eventlisteners

<polymer-element name="my-element">

  <template>
    <style>
    #content {background-color: #f2f2f2;}
    #button {padding: 10px 20px;}
    </style>

    <div id="content">
        <h1 id="title">Title</h1>

        <p>This example uses the addEventListener() method to attach a click event to the document.</p>


        <button id="button">Testbutton</button>
    </div>

  </template>

  <script>
    Polymer('my-element', {
        ready: function () {
            var button = this.$.button;
            button.addEventListener("click", function () {
                alert('alert');
            });
        }
    });
  </script>

</polymer-element>

再次编辑：OP希望将html与JS分开

再编辑1次：我认为如果不使用声明性方法，使用匿名函数是最简单的方法。代码编辑

Answer 2

脚本标记位于关闭模板标记和结束聚合物元素标记之间或元素定义之间，但在这种情况下，当您调用Polymer（'my-element'）时，您需要包含标记名称

以上是外部js文件的示例，您可以使用css

执行相同的操作

<polymer-element name="my-element">

  <template>
   <link rel="stylesheet" href="my-element.css">

    <div id="content">
        <h1 id="title">Title</h1>

        <p>This example uses the addEventListener() method to attach a click event to the document.</p>


        <button id="button">Testbutton</button>
    </div>

  </template>
  <script src="my-element/my-element.js"></script>
</polymer-element>

文件夹名称和js文件名可以是您想要的任何内容，但我认为您可以按照这样的方式构建良好实践

文件夹结构

-myelements -folder 
--my-first-element -folder
  --my-first-element.html
  --my-first-element.css
  --my-first-element.js
--my-second-element -folder
  --my-second-element.html
  --my-second-element.css
  --my-second-element.js

<polymer-element name="ouch-button">
  <template>
    <button on-click="{{onClick}}">Send hurt</button>
  </template>
  <script>
    Polymer({
      onClick: function() {
        alert('ouch', {msg: 'That hurt!'}); // fire(type, detail, targetNode, bubbles?, cancelable?)
      }
    });
  </script>
</polymer-element>

<ouch-button></ouch-button>

Polymer：我在哪里把Javascript放到Element中？

2 个答案: