CODEWITHSUNDEEP
javascriptpolymer
Kasper
Kasper

Reputation: 13582

Dynamically added paper-button is not rendered correctly

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

Upvotes: 3

Views: 768

Answers (2)

Matthew King
Matthew King

Reputation: 1362

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.

Upvotes: 2

Kasper
Kasper

Reputation: 13582

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

Upvotes: 3

Related Questions