javascript - 动态创建 polymer 中的自定义元素属性为空

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

已编辑答案:

在您的自定义元素中，您正在寻找就绪的“customId”，但该属性尚未设置。将您的 Ready 函数替换为 customIdChanged 函数，代码将按预期工作。

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