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

Question

I have the following 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>

If I add the paper-button statically, it renders normally, but I have do allmost the exact same thing dynamically, I don't get any animations.

Is there something special I need to do if I add the paper-button dynamically ?

see: http://jsbin.com/rararurotu/1/edit?html,output

Answer 1

You need to set the textContent using the Polymer.dom api.

The following code will work:

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

see: http://jsbin.com/gexifaxaqi/1/edit?html,output

Answer 2

In Polymer 1.0, there are a couple of ways to do this.

Option 1 (using document.createElement )

Update: I think @Kasper's response is a better approach when using Polymer.dom because it allows us to insert textContent directly instead of via an internal 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>

See Polymer.dom for more info.

Option 2 (idiomatic, using conditional templates)

Here we use Polymer's native language to create the button element based on a condition (in this case, a property value).

<!-- 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>

See helper elements for more info.

My personal take is that Polymer's DSL for creating components is fairly clean and, where possible, it is good to take advantage of that.