动态添加的纸按钮未正确呈现

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 1.0 中，有几种方法可以做到这一点。

选项 1（使用 `document.createElement`）

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

<!-- 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 相当干净，如果可能，最好利用它。

Answer 2

您需要使用 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

动态添加的纸按钮未正确呈现

Dynamically added paper-button is not rendered correctly

javascript

polymer

选项 1（使用 `document.createElement`）

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

动态添加的纸按钮未正确呈现

Dynamically added paper-button is not rendered correctly

javascript

polymer

选项 1（使用 document.createElement）

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

选项 1（使用 `document.createElement`）