探索Emberjs——了解Emberjs

本文轉載自查看原文 2013-03-12 14:00 18527

簡單介紹

Emberjs——一個用於創建 web 應用的 JavaScript MVC 框架，采用基於字符串的Handlebars模板，支持雙向綁定、觀察者模式、計算屬性（依賴其他屬性動態變化）、自動更新模板、路由控制、狀態機等。

Ember使用自身擴展的類來創建Ember對象、數組、字符串、函數，提供大量方法與屬性用於操作。

每一個Ember應用都使用各自的命名空間，避免沖突。

Ember采用可嵌套的視圖層，使視圖變得有層次。

構建應用

開始一個應用，需要先使用Ember.Application.create()來創建一個實例。

然后分別定義模型（Model）、視圖（View）、控制（Controller）層。

使用extend()方法創建子類，如用Ember.Object.extend()創建一種模型類，用Ember.View.extend()創建視圖類，用Ember.Controller.extend()創建控制類。通過create()方法生成實例。

你還需要在HTML頁面里使用Handlebars加入模板，以完成視圖的顯示。

當你與頁面進行交互時，視圖接收到你的操作，通過控制器將事件傳遞給模型，模型對數據進行修改，視圖監控到模型數據的修改，相應的更新頁面。

完成最簡單的一個應用，總會包含下面的代碼：

/*創建命名空間*/
App = Ember.Application.create();

/*創建應用視圖類並指定模板名稱，該類會創建一個實例並插入應用的視圖層級中作為根視圖*/
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

/*創建應用控制器類，為視圖提供上下文，模板里的內容將由該控制器提供*/
App.ApplicationController = Ember.Controller.extend();

/*創建路由控制，用於在應用的各種狀態中前進或后退，也可以通過序列化的URL直接進入到某個狀態*/
App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/'
    })
  })
});


/*初始化應用，啟動路由進程，創建視圖實例並插入到頁面*/
App.initialize();

/*在HTML頁面加入模板*/
<script type="text/x-handlebars" data-template-name="application">

</script>

在Ember中默認使用 “application” 作為模板名稱，以及作為視圖與控制器的前綴。如果用於創建類時，首字母必須大寫。

如果未定義ApplicationView或ApplicationController，Ember將會拋出異常提示。

我在這里寫了一個簡單的示例應用，你現在就可以開始動手跟着做了：探索Emberjs——第一個應用