http://emberjs.com/about/ からstarter kitをダウンロードして展開
-
とりあえずindex.htmlを開いてみるとHello world!と表示された
- クリックしたらalertが出た
-
index.html
- js/
- libs/ : emberとjquery
- app.js
- css/style.css
index.htmlとapp.jsがアプリ本体らしい
index.html(抜粋) : divタグが一つもなくて、handlebarsのビュー定義だけがある。scriptタグなのか。
<body>
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world!</h1>
{{/view}}
</script>
- レンダリングされたHTMLをchromeの開発者コンソールで見ると、divが自動生成されている。
<div id="ember153" class="ember-view">
<div id="ember167" class="ember-view">
<h1>Hello world!</h1>
</div>
</div>
- app.js (全文)
- とりあえずEm.Applicationを作るらしい
- そのあとViewを作るらしい
- この変数名(App.MyView)がhandlerbars側と結びつけるためのキーとして使われるらしい
- ViewにはmouseDown:等でイベントを書けるらしい
- それはもうビューっていうかビュー以上の何かでは…
var App = Em.Application.create();
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
}
});
- ビューは入れ子にできるらしい http://emberjs.com/guides/view_layer/#toc_child-views
- GUIでいう各コンポーネントがViewになるのかな