More Related Content
Similar to もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~ (20)
More from Ryunosuke SATO (12)
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
- 4. @tricknotes
I am a software developer who
love JavaScript and Ruby.
http://tricknotes.hateblo.jp/
- 6. I am a contributer
of Ember.js
- 30. * HTML + CSS + JS の密結合
* データの多重管理問題
* DOM based architecture
* global な jQuery 関数による view の密結合
* Event の開放漏れ
* DOM の開放漏れ
などなど...
大変なところ
- 62. Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
# !"" sheet_index_controller.js
# $"" sheet_new_controller.js
!"" models
# !"" order_line.js
# $"" sheet.js
!"" router.js
!"" routes
# !"" sheets_index.js
# $"" sheets_new.js
$"" templates
$"" sheets
!"" index.js.handlebars
$"" new.js.handlebars
- 63. Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
# !"" sheet_index_controller.js
# $"" sheet_new_controller.js
!"" models
# !"" order_line.js
# $"" sheet.js
!"" router.js
!"" routes
# !"" sheets_index.js
# $"" sheets_new.js
$"" templates
$"" sheets
!"" index.js.handlebars
$"" new.js.handlebars
自動で全部のファイルが結合される
(application.js)
//= require_tree .
- 64. Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
# !"" sheet_index_controller.js
# $"" sheet_new_controller.js
!"" models
# !"" order_line.js
# $"" sheet.js
!"" router.js
!"" routes
# !"" sheets_index.js
# $"" sheets_new.js
$"" templates
$"" sheets
!"" index.js.handlebars
$"" new.js.handlebars
<scripe src=”application.js”></script>
HTML からは 1 ファイルを読むだけ
(application.js)
//= require_tree .
- 65. Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
# !"" sheet_index_controller.js
# $"" sheet_new_controller.js
!"" models
# !"" order_line.js
# $"" sheet.js
!"" router.js
!"" routes
# !"" sheets_index.js
# $"" sheets_new.js
$"" templates
$"" sheets
!"" index.js.handlebars
$"" new.js.handlebars
handlebars はファイル
(+ディレクトリ)名を
テンプレート名としてコンパイル
- 66. Asset Pipeline
$ tree
.
!"" application.js
!"" controllers
# !"" sheet_index_controller.js
# $"" sheet_new_controller.js
!"" models
# !"" order_line.js
# $"" sheet.js
!"" router.js
!"" routes
# !"" sheets_index.js
# $"" sheets_new.js
$"" templates
$"" sheets
!"" index.js.handlebars
$"" new.js.handlebars
<h1>帳票一覧</h1>
{{#unless this}}
まだ帳票は作成されていません
{{/unless}}
<ul>
{{#each}}
<li>
#{{id}}:
{{date createdAt}}
{{#link-to 'sheet' this}}
内容を見る
{{/link-to}}
</li>
{{/each}}
</ul>
テンプレート単位でファイルに分割できる
- 88. class SheetSerializer < ActiveModel::Serializer
attributes :id, :created_at
has_many :order_lines,
embed: :objects,
include: true
end
Account.SheetSerializer =
DS.ActiveModelSerializer.extend({
attrs: {
orderLines: {embedded: 'always'}
}
});
Ruby 側のシリアライザ
JS 側のシリアライザ
- 89. {
“sheet”: {
“id”: 6,
“created_at”: "2013-09-21T15:59:24.001Z",
“order_lines”: [{
“id”: 10,
“product_name”: "ガラナ",
“unit_price”: 120,
“count”: 10
}, {
“id”: 11,
“product_name”: "豆乳",
“unit_price”: 98,
“count”: 30
}]
}
}
やりとりされる JSON の scheme
- 96. feature 'sheet を管理できる', js: true do
scenario 'sheet を作成できる' do
visit root_path
expect(page).to have_css('h1', text: '帳票登録')
within all('#new-sheet tr')[1] do
fill_in 'productName', with: 'ガラナ'
fill_in 'unitPrice', with: '120'
fill_in 'count', with: '3'
end
expect(page).to have_css('.total', text: '360')
click_button '登録する'
expect(page).to have_css('h1', text: '帳票一覧')
expect(page).to have_css('li', text: '#1')
end
end