Question

我正在使用polymer-element创建一个新的自定义元素，并使用attributes发布一些属性。元素就像这样创建

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

  <template>

    <div class = "content">
      Hello World
    </div>

    <style>
      .content {
        color: red;
      }
    </style>
  </template>

  <script>
    Polymer({
      ready: function(){
        console.log("item id is : ", this.customId);
      }
    })
  </script>

</polymer-element>

现在当我在我的html中使用这个自定义元素时

<my-element customId="foo"></my-element>

它按预期工作，并在控制台中打印item id is : foo。但是当我使用像

这样的javascript动态创建和添加任何自定义元素时

document.addEventListener('polymer-ready', function() {
  var myElement = document.createElement("my-element");

  myElement.setAttribute("customId", "bar");
  document.body.appendChild(myElement);

});

在准备函数中，

属性itemId是null并且它在控制台中打印item id is : null，即使自定义元素的html创建正常并手动获取属性itemid在控制台中给出正确的itemid 这里出了什么问题。
请参阅此处的plnkr：http://plnkr.co/edit/9pbrgDF6lvWaT7auK74H?p=preview

Answer 1

试试这个

myElement.customId = "bar";

回答编辑：

在您要查找的自定义元素中＆＃34; customId＆＃34;准备就绪，该属性尚未设置。使用customIdChanged函数替换ready函数，代码将按预期工作。

<script>
  Polymer({
    customIdChanged: function(){
      console.log("item id is : ", this.customId);
    }
   })
</script>

在聚合物中动态创建自定义元素的属性为null

1 个答案: