Dynamically created polymer element data binding attributes

Question

If I want to bind the attributes of two polymer elements together, I can use the data binding in the template and do the following:

<!-- Publish .items so others can use it for attribute binding. -->
<polymer-element name="td-model" attributes="items">
  <script>
    Polymer('td-model', {
      ready: function() {
        this.items = [1, 2, 3];
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app">
  <template>
    <td-model items="{{list}}"></td-model>
    <polymer-localstorage name="myapplist" value="{{list}}"></polymer-localstorage>
  </template>
  <script>
    Polymer('my-app', {
      ready: function() {
        // Initialize the instance "list" property to empty array.
        this.list = this.list || [];
      }
    });
  </script>
</polymer-element>

From http://www.polymer-project.org/articles/communication.html#binding

However, if I create an element (let it be called) <my-childelement>dynamically using document.createElement()inside another element <my-parentelement>, then how can I synchronize the changes made to the my-childelement attribute with the my-parent element?

, , , , , / , .

Node.bind() , , , .

, - :

<polymer-element name="my-parentelement" attributes="shape">
  <script>
    Polymer('my-parentelement', {
      shape: square,
      ready: function() {
        var child = document.createElement('my-childelement');
        this.bind('shape', new PathObserver(child, 'shape');

        // Now this.shape will be kept in sync with child.shape, e.g.
        child.shape = 'triangle';
        this.shape == child.shape; // evaluates to true
      }
    });
  </script>
</polymer-element>

Answer 1

, , . IOW, -

  <template>
    <template if="{{kind == 'vimeo'}}">
      Vimeo: {{name}}
    </template>
    <template if="{{kind == 'soundcloud'}}">
      Soundcloud <b>{{name}}</b>
    </template>
    ...

: http://codepen.io/sjmiles/pen/FkacJ?editors=100

Answer 2

, , . , , .

: https://github.com/semateos/polymer-lazy-load

-app.html:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="lazy-test.html">

<polymer-element name="demo-app" attributes="session">
  <template>

    <input type="text" value="{{session.id}}">

    <button on-tap="{{buttonClick}}">Test</button>

    <div id="holder"></div>

  </template>
  <script>
    Polymer({

      buttonClick: function(e){

        //create the polymer element
        var child = document.createElement('lazy-test');

        //bind the session value to the parent
        child.bind('session', new PathObserver(this, 'session'));

        //attach it to the parent
        this.$.holder.appendChild(child);
      },

      created: function() {

        //set the initial value
        this.session = {id: '123'};
      }
    });
  </script>
</polymer-element>

test.html:

<link rel="import" href="/bower_components/polymer/polymer.html">

<polymer-element name="lazy-test" attributes="session">
  <template>

    <h1>Lazy Child: {{session.id}}</h1>

    <input type="text" value="{{session.id}}">

  </template>
  <script>
    Polymer({

      created: function() {

        // hint that session is an object
        this.session = {};
      }
    });
  </script>
</polymer-element>