tricknotes/ember-demo.html

## ember-demo.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
    <script src="http://builds.emberjs.com/tags/v1.0.0/ember.js"></script>
  </head>

  <script type="text/x-handlebars">
    <h1>帳票アプリ</h1>

    {{outlet}}

    {{#link-to 'sheets'}}
      帳票一覧へ
    {{/link-to}}

    {{#link-to 'index'}}
      帳票作成へ
    {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    帳票作成

    <table>
      <tr>
        <th>商品名</th>
        <th>単価</th>
        <th>個数</th>
        <th>小計</th>
      </tr>
      {{#each lines}}
      <tr>
        <td>{{input value=productName}}</td>
        <td>{{input type="number" value=unitPrice}}</td>
        <td>{{input type="number" value=count}}</td>
        <td>{{subtotal}}</td>
        <td>
      <button {{action deleteOrderLine this}}>
        削除
      </button>
        </td>
      </tr>
      {{/each}}
    </table>

    <div>
      合計: {{total}}
    </div>

    <button {{action addOrderLine}}>
      行を追加
    </button>

    <button {{action addSheet}}>
      登録する
    </button>
  </script>

  <script type="text/x-handlebars" data-template-name="sheets">
    帳票一覧

    <ul>
      {{#each}}
        <li>
          {{createdAt}}
          {{#link-to 'sheet' this}}
            詳細を見る
          {{/link-to}}
        </li>
      {{/each}}
    </ul>
  </script>

<script type="text/x-handlebars" data-template-name="sheet">
  <h1>帳票詳細 #{{id}}</h1>

  作成日時: {{createdAt}}

  <table>
    <tr>
      <th>商品名</th>
      <th>単価</th>
      <th>個数</th>
      <th>小計</th>
    </tr>
    {{#each lines}}
      <tr>
        <td>{{productName}}</td>
        <td>{{unitPrice}}</td>
        <td>{{count}}</td>
        <td>
          {{subtotal}}
        </td>
      </tr>
    {{/each}}
    <tr>
      <td colspan="3"></td>
      <td>
        {{total}}
      </td>
    </tr>
  </table>
</script>

  <script>
    Account = Ember.Application.create();

    Account.IndexRoute = Ember.Route.extend({
      model: function() {
        var sheet = Account.Sheet.create({
          lines: [
            Account.OrderLine.create(),
            Account.OrderLine.create()
          ]
        });

        return sheet;
      }
    });

    Account.SheetsRoute = Ember.Route.extend({
      model: function() {
        return Account.Sheet.sheets;
      }
    });

    Account.Router.map(function() {
      this.resource('sheets');
      this.resource('sheet', {path: '/sheet/:id'});
    });

    Account.Sheet = Ember.Object.extend({
      lines:     [],
      createdAt: null,

      id: function() {
        return Account.Sheet.sheets.indexOf(this) + 1;
      }.property('Account.Sheet.sheets.length'),

      total: function() {
        return this.get('lines.@each.subtotal').reduce(function(total, subtotal) {
          return total + (subtotal || 0);
        }, 0);
      }.property('lines.@each.subtotal')
    });

    Account.OrderLine = Ember.Object.extend({
      productName: null,
      unitPrice:   0,
      count:       0,

      subtotal: function() {
        return this.get('unitPrice') * this.get('count');
      }.property('unitPrice', 'count')
    });

    Account.Sheet.sheets = [];

    Account.IndexController = Ember.ObjectController.extend({
      actions: {
        addOrderLine: function() {
          this.get('lines').addObject(Account.OrderLine.create());
        },

        deleteOrderLine: function(orderLine) {
          this.get('lines').removeObject(orderLine);
        },

        addSheet: function() {
          var sheet = this.get('model');

          sheet.set('createdAt', new Date());
          Account.Sheet.sheets.addObject(sheet);

          this.transitionToRoute('sheets');
        }
      }
    });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.0.0/ember.js"></script>
	</head>

	<script type="text/x-handlebars">
	<h1>帳票アプリ</h1>

	{{outlet}}

	{{#link-to 'sheets'}}
	帳票一覧へ
	{{/link-to}}

	{{#link-to 'index'}}
	帳票作成へ
	{{/link-to}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	帳票作成

	<table>
	<tr>
	<th>商品名</th>
	<th>単価</th>
	<th>個数</th>
	<th>小計</th>
	</tr>
	{{#each lines}}
	<tr>
	<td>{{input value=productName}}</td>
	<td>{{input type="number" value=unitPrice}}</td>
	<td>{{input type="number" value=count}}</td>
	<td>{{subtotal}}</td>
	<td>
	<button {{action deleteOrderLine this}}>
	削除
	</button>
	</td>
	</tr>
	{{/each}}
	</table>

	<div>
	合計: {{total}}
	</div>

	<button {{action addOrderLine}}>
	行を追加
	</button>

	<button {{action addSheet}}>
	登録する
	</button>
	</script>

	<script type="text/x-handlebars" data-template-name="sheets">
	帳票一覧

	<ul>
	{{#each}}
	<li>
	{{createdAt}}
	{{#link-to 'sheet' this}}
	詳細を見る
	{{/link-to}}
	</li>
	{{/each}}
	</ul>
	</script>

	<script type="text/x-handlebars" data-template-name="sheet">
	<h1>帳票詳細 #{{id}}</h1>

	作成日時: {{createdAt}}

	<table>
	<tr>
	<th>商品名</th>
	<th>単価</th>
	<th>個数</th>
	<th>小計</th>
	</tr>
	{{#each lines}}
	<tr>
	<td>{{productName}}</td>
	<td>{{unitPrice}}</td>
	<td>{{count}}</td>
	<td>
	{{subtotal}}
	</td>
	</tr>
	{{/each}}
	<tr>
	<td colspan="3"></td>
	<td>
	{{total}}
	</td>
	</tr>
	</table>
	</script>

	<script>
	Account = Ember.Application.create();

	Account.IndexRoute = Ember.Route.extend({
	model: function() {
	var sheet = Account.Sheet.create({
	lines: [
	Account.OrderLine.create(),
	Account.OrderLine.create()
	]
	});

	return sheet;
	}
	});

	Account.SheetsRoute = Ember.Route.extend({
	model: function() {
	return Account.Sheet.sheets;
	}
	});

	Account.Router.map(function() {
	this.resource('sheets');
	this.resource('sheet', {path: '/sheet/:id'});
	});

	Account.Sheet = Ember.Object.extend({
	lines: [],
	createdAt: null,

	id: function() {
	return Account.Sheet.sheets.indexOf(this) + 1;
	}.property('Account.Sheet.sheets.length'),

	total: function() {
	return this.get('lines.@each.subtotal').reduce(function(total, subtotal) {
	return total + (subtotal \|\| 0);
	}, 0);
	}.property('lines.@each.subtotal')
	});

	Account.OrderLine = Ember.Object.extend({
	productName: null,
	unitPrice: 0,
	count: 0,

	subtotal: function() {
	return this.get('unitPrice') * this.get('count');
	}.property('unitPrice', 'count')
	});

	Account.Sheet.sheets = [];

	Account.IndexController = Ember.ObjectController.extend({
	actions: {
	addOrderLine: function() {
	this.get('lines').addObject(Account.OrderLine.create());
	},

	deleteOrderLine: function(orderLine) {
	this.get('lines').removeObject(orderLine);
	},

	addSheet: function() {
	var sheet = this.get('model');

	sheet.set('createdAt', new Date());
	Account.Sheet.sheets.addObject(sheet);

	this.transitionToRoute('sheets');
	}
	}
	});
	</script>
	</html>