More than 5 years have passed since last update.

Ember.jsを使ってみる

Ember.js

Posted at 2012-06-18

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になるのかな

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up