Question

考虑定义聚合物元素

<dom-module id="custom-element"> 
  <template>
    <h1>I expect to be green</h1>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        color: {
          type: String,
          value: 'red'
        }
      },
      ready: function() {
        this.style.color = this.color;
      }
    });
  </script>
</dom-module>

我希望以下两个会产生相同的结果：

（标记中）

<body>
  <custom-element color="green"></custom-element>
</body>

（在JS中）

var customElement = document.createElement('custom-element');
customElement.color = 'green';
document.body.appendChild(customElement);

但事实上它没有，因为似乎设置了属性并且在将customElement附加到document.body之前触发了聚合物'ready'函数。

所以基本上我不能动态创建（在JS中）自定义元素并设置它们的初始属性，与默认属性不同。

你怎么建议我应该这样做？

谢谢！

Answer 1

在color回调中设置attached而不是ready。在dom中附加元素后调用Attached。

＆＃13;

<base href="https://polygit.org/components/">
<script src="wecomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="custom-element">
  <template>
    <h1>I expect to be green</h1>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        color: {
          type: String,
          value: 'red'
        }
      },
      attached: function() {
        this.style.color = this.color;
      }
    });
  </script>
</dom-module>


<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    var customElement = document.createElement('custom-element');
    customElement.color = 'green';
    document.body.appendChild(customElement);
  </script>
</body>

</html>

＆＃13;

Answer 2

在您的情况下，我会避免更改DOM并使用简单的属性绑定。

以下是概念验证：http://jsbin.com/jozejemumu/1/edit?html,js,output

正如您所看到的，我对style元素的h1属性使用了属性绑定，它只是将CSS颜色属性设置为元素'color属性的值。是

代码非常简单，看起来像这样：

  <dom-module id="custom-element"> 
    <template>
      <h1 style$="color: [[color]];">I expect to be green</h1>
    </template>
    <script>
      Polymer({
        is: 'custom-element',
        properties: {
          color: {
            type: String,
            value: 'red'
          }
        }
      });
    </script>
  </dom-module>

使用元素保持不变：

  <custom-element color="green"></custom-element>

或者：

  var customElement = document.createElement('custom-element');
  customElement.color = 'orange';
  document.body.appendChild(customElement);

确保color属性包含有效的HTML颜色名称/值。

在Polymer中动态创建元素并设置属性

2 个答案: