动态添加的纸张按钮无法正确呈现

Question

我有以下html：

  <paper-button raised>Static</paper-button>
  <script>
    var button = document.createElement('paper-button');
    button.textContent = "dynamic";
    button.raised = true;
    document.body.appendChild(button);
  </script>

如果我静态添加纸质按钮，它会正常渲染，但我动态完成所有相同的操作，我没有动画。

如果我动态添加纸质按钮，我还需要做些什么吗？

请参阅：http://jsbin.com/rararurotu/1/edit?html,output

Answer 1

您需要使用Polymer.dom api设置textContent。

以下代码可以使用：

<paper-button raised>static</paper-button>
<script>
  var button = document.createElement('paper-button');
  button.raised = true;
  Polymer.dom(button).textContent = 'dynamic';
  document.body.appendChild(button);
</script>

请参阅：http://jsbin.com/gexifaxaqi/1/edit?html,output

Answer 2

在Polymer 1.0中，有几种方法可以做到这一点。

选项1（使用document.createElement）

更新：我认为使用Polymer.dom时@ Kasper的响应是更好的方法，因为它允许我们直接插入textContent而不是通过内部类。

<!-- my-dom-element.html -->
<link href="bower_components/polymer/polymer.html" rel="import">
<link href="bower_components/paper-button/paper-button.html" rel="import">

<dom-module id="my-dom-element">
  <template>
    <div>
      <paper-button raised>button 1</paper-button>
    </div>
  </template>
  <script>
    Polymer({
      is: 'my-dom-element',
      ready: function () {
        var button = document.createElement('paper-button');
        button.raised = true;
        button.querySelector('.content').textContent = 'button 2';
        Polymer.dom(this.root).appendChild(button);
      }
    });
  </script>
</dom-module>

有关详细信息，请参阅Polymer.dom。

选项2（惯用，使用条件模板）

这里我们使用Polymer的本地语言根据条件（在本例中为属性值）创建按钮元素。

<!-- my-conditional-dom-element.html -->
<link href="bower_components/polymer/polymer.html" rel="import">
<link href="bower_components/paper-button/paper-button.html" rel="import">

<dom-module id="my-conditional-dom-element">
  <template>
    <div>
      <template is="dom-if" if="{{success}}">
        <paper-button raised>
          Conditional Button
        </paper-button>
      </template>
    </div>
  </template>
  <script>
    Polymer({
      is: 'my-conditional-dom-element',
      properties:  {
        success: {
          type: Boolean,
          value: true
        }
      }
    });
  </script>
</dom-module>

有关详细信息，请参阅helper elements。

我个人认为，Polymer用于创建组件的DSL相当干净，并且在可能的情况下，利用它是很好的。