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

<h3>Cat list</h3>

<cat-appender 
kitties='[{"name": "Simba", "age": 29}, {"name": "Mufasa", "age": 35}, {"name": "Sylvester", "age":71} ]' >
</cat-appender>

<div>
  <button onclick="displayData()">Get data</button>
  <div id="dataDiv"></div>
</div>

<script>
  var displayData = function() {
    var catAppender = document.querySelector("cat-appender");
    document.querySelector("#dataDiv").innerHTML = JSON.stringify(catAppender.getData());
  };
</script>

##dom-repeat tutorial
Showing the cat-appender element that displays a list of cats.

Post is [here](http://shockry.blogspot.com.eg/2016/06/polymer-10-dom-repeat-tutorial-part-1.html)

<!-- import latest release version of all components from polygit -->
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">

<dom-module id="cat-appender">

  <template>

    <style>
      :host {
        display: inline-block;
      }
    </style>

    <div>
      <input type="text" id="kittyName" placeholder="Name">
      <input type="text" id="kittyAge" placeholder="Age">
      <button on-click="_addKitty">Add</button>
    </div>

    <ul>
      <template is="dom-repeat" items="[[kitties]]" as="kitty">
        <li>
          <button on-click="_removeKitty">Remove</button>
          [[kitty.name]] : [[kitty.age]]
        </li>
      </template>
    </ul>
  </template>

  <script>
  Polymer({
    is: 'cat-appender',
    properties:{
      kitties: Array
    },
    _addKitty: function() {
      var kittyName = this.$$('#kittyName').value;
      var kittyAge  = this.$$('#kittyAge').value;
      
      this.push("kitties", {name: kittyName, age: kittyAge});
    },
    _removeKitty: function(e) {
      var index = this.kitties.indexOf(e.model.kitty);
      this.splice('kitties', index, 1);
    },
    getData: function() {
      return this.kitties;
    }
  });
  </script>

</dom-module>