ritch/async.html

## async.html
<!doctype html>
<html>
  <body data-controller="list">

    <ul>
      <li data-repeat="item in items">
        {{ item.text }}
      </li>
    </ul>

    <script src="../angu.js"></script>
    <script>
      function list(ctx, update) {
        ctx.items = [];
        $.getJSON('/items', function (items) {
          ctx.items = items;
          update();
        });

        // or

        ctx.update = function (changes) {
          ctx.items = changes;
        }
        $.getJSON('/items', ctx.update);
      }
    </script>
  </body>
</html>

## custom.html
<!doctype html>
<html>
  <body data-controller="events">

    <input data-model="text" type="text" data-enter="submit" />

    <script src="../angu.js"></script>
    <script>
      angu.define('enter', function (el, ctx, callback) {
        $(el).on('keypress', function (e) {
          if (e.which === 13) {
            callback(e);
          }
        })
      });

      function events(ctx) {
        ctx.text = 'foo';
        ctx.submit = function (e) {
          ctx.text = '';
        }
      }
    </script>
  </body>
</html>

## logic.html
<!doctype html>
<html>
  <body data-controller="list">
    <ul>
      <li data-repeat="item in items">
        <input type="checkbox" data-model="item.checked" />
        {{ item.title }} - ${{ item.price }}
      </li>
    </ul>
    <p data-show="remaining() > 0">
      ${{ remaining }} left
    </p>

    <script>
      function list(ctx) {
        ctx.items = [{title: 'foo', price: 7}];

        ctx.remaining = function () {
          var result;
          for(var i = 0; i < ctx.items.length; i++) {
            if(!ctx.items[i].checked) result += ctx.items[i].price;
          }
          return result;
        }
      }
    </script>
    <script src="../angu.js"></script>
  </body>
</html>

## simple.html
<!doctype html>
<html>
  <body>
    <div data-controller="simple">
      <label>Name:</label>
      <input type="text" data-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
    <script src="../angu.js"></script>
  </body>
</html>
	<!doctype html>
	<html>
	<body data-controller="list">

	<ul>
	<li data-repeat="item in items">
	{{ item.text }}
	</li>
	</ul>

	<script src="../angu.js"></script>
	<script>
	function list(ctx, update) {
	ctx.items = [];
	$.getJSON('/items', function (items) {
	ctx.items = items;
	update();
	});

	// or

	ctx.update = function (changes) {
	ctx.items = changes;
	}
	$.getJSON('/items', ctx.update);
	}
	</script>
	</body>
	</html>
	<!doctype html>
	<html>
	<body data-controller="events">

	<input data-model="text" type="text" data-enter="submit" />

	<script src="../angu.js"></script>
	<script>
	angu.define('enter', function (el, ctx, callback) {
	$(el).on('keypress', function (e) {
	if (e.which === 13) {
	callback(e);
	}
	})
	});

	function events(ctx) {
	ctx.text = 'foo';
	ctx.submit = function (e) {
	ctx.text = '';
	}
	}
	</script>
	</body>
	</html>
	<!doctype html>
	<html>
	<body>
	<div data-controller="simple">
	<label>Name:</label>
	<input type="text" data-model="yourName" placeholder="Enter a name here">
	<hr>
	<h1>Hello {{yourName}}!</h1>
	</div>
	<script src="../angu.js"></script>
	</body>
	</html>