robdodson/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <!-- Web Components -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/iron-localstorage/iron-localstorage.html">
</head>
<body unresolved>

  <template is="dom-bind" id="app">
    <template is="dom-repeat" items="{{todos}}">
      <div>{{item.title}}</div>
    </template>

    <iron-localstorage name="my-app-storage"
                       value="{{todos}}"
                       on-iron-localstorage-load-empty="onEmpty">
    </iron-localstorage>

    <input type="text" id="itemToAdd">
    <button on-tap="addItem">Add Item</button>
  </template>

  <script>
  var app = document.querySelector('#app');
  app.addEventListener('dom-change', function() {
    this.todos = [
      {
        title: 'foo'
      },
      {
        title: 'bar'
      },
      {
        title: 'baz'
      }
    ];

    console.log(this.get('todos'));
  });

  app.addItem = function() {
    this.push('todos', {
      title: this.$.itemToAdd.value
    });
  };

  app.onEmpty = function() {
    console.log('local storage is empty');
    console.log(this.get('todos'));
  }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Web Components -->
	<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="bower_components/polymer/polymer.html">
	<link rel="import" href="bower_components/iron-localstorage/iron-localstorage.html">
	</head>
	<body unresolved>

	<template is="dom-bind" id="app">
	<template is="dom-repeat" items="{{todos}}">
	<div>{{item.title}}</div>
	</template>

	<iron-localstorage name="my-app-storage"
	value="{{todos}}"
	on-iron-localstorage-load-empty="onEmpty">
	</iron-localstorage>

	<input type="text" id="itemToAdd">
	<button on-tap="addItem">Add Item</button>
	</template>

	<script>
	var app = document.querySelector('#app');
	app.addEventListener('dom-change', function() {
	this.todos = [
	{
	title: 'foo'
	},
	{
	title: 'bar'
	},
	{
	title: 'baz'
	}
	];

	console.log(this.get('todos'));
	});

	app.addItem = function() {
	this.push('todos', {
	title: this.$.itemToAdd.value
	});
	};

	app.onEmpty = function() {
	console.log('local storage is empty');
	console.log(this.get('todos'));
	}
	</script>
	</body>
	</html>