Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment