binding problem

how to tell Polymer that #one and #two are bound to the same object?Polymer boilerplate for jsFiddle

by warpech

HTML

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }

  </style>
  <template>
    <input value="{{info.name::input}}"><span>{{info.name}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-example',
      properties: {
        info: {
          type: Object,
          notify: true
        }
      }
    });

  </script>
</dom-module>
<template is="dom-bind">
  <x-example id="one" info="{{info}}"></x-example>
  <x-example id="two" info="{{info}}"></x-example>
</template>

CSS

body {
  font-family: sans-serif;
}

JavaScript

// only need this when in the main document and on non-Chrome
addEventListener('WebComponentsReady', function() {
  var info = {
    name: "Marcin"
  };

  document.querySelector("template[is]").info = info;
  document.querySelector("template[is]").addEventListener("info-changed", function() {
   console.log("arguments", arguments);
  debugger;
  });
  //how to tell Polymer that #one and #two are bound to the same object?
});