<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="import" href="../../polymer/polymer.html">
    <link rel="import" href="my-input.html">
  </head>
  <body>
    <template is="dom-bind">
      <my-input url="http://localhost:3000/users" last-response="{{res}}"></my-input>
      <div>
        <template is="dom-repeat" items="{{res}}" as="model">
          <div>
            <span>name: {{model.name}}</span>
            <span>last: {{model.last}}</span>
          </div>
        </template>
      </div>
    </template>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="import" href="../../polymer/polymer.html">
    <link rel="import" href="my-input.html">
  </head>
  <body>
    <template id="app" is="dom-bind">
      <my-input
        url="http://localhost:3000/users"
        last-response="{{res}}"
        on-waiting="waiting"
        on-response="handleResponse"></my-input>
      <div>
        <template is="dom-repeat" items="{{res}}" as="model">
          <div>
            <span>name: {{model.name}}</span>
            <span>last: {{model.last}}</span>
          </div>
        </template>
      </div>
      <div id="loading"></div>
    </template>

    <script>
      document.addEventListener('dom-change', function () {
        var app = document.getElementById('app');
        var loading = document.getElementById('loading');
        app.waiting = function () {
          loading.innerHTML = 'loading...';
        }
        app.handleResponse = function () {
          loading.innerHTML = '';
        }
      });
    </script>
  </body>
</html>

Add behavior main events to the demo
Add behavior main events to the demo
