摘要：在文件夾內創(chuàng)建，內容如下創(chuàng)建，內容如下使用安裝依賴在的頭部加入調用命令，同時在你的默認瀏覽器中打開。最后，我們更新下，給每個報道添加鏈接修改完畢地后，可以在瀏覽器中直接看到結果。

編者注：我們發(fā)現(xiàn)了有趣的系列文章《30天學習30種新技術》，正在翻譯，一天一篇更新，年終禮包。下面是第19天的內容。

到目前為止，我們這一系列文章涉及了Bower、AngularJS、GruntJS、PhoneGap和MeteorJS 這些JavaScript技術。今天我打算學習一個名為Ember的框架。本文將介紹如何用Ember創(chuàng)建一個單頁面的社交化書簽應用。本教程將包括兩篇：第1篇介紹客戶端代碼和用HTML 5本地存儲持久保存數(shù)據(jù)，第2篇中我們將使用一個部署在OpenShift上的REST后端。過幾天我會寫第2篇。

我們將開發(fā)一個社交化書簽應用，允許用戶提交和分享鏈接。你可以在這里查看這個應用。這個應用可以做到：

當用戶訪問/時，他會看到以提交時間排序的報道列表。

當用戶訪問某個書簽時，例如#/stories/d6p88，用戶會看到關于這個報道的信息，例如是誰提交的，何時提交的，以及文章的摘要。

最后，當用戶通過#/story/new提交新報道時，內容會存儲在用戶瀏覽器的本地存儲上。

Ember是一個客戶端的JavaScript MV* 框架，用來構建野心勃勃的web應用。它依賴于jQuery和Handlebars庫。如果你曾經(jīng)在Backbone下工作，那么你會發(fā)現(xiàn)Ember是一個武斷的Backbone，或者Backbone++。Ember可以為你完成很多事情，如果你遵循它的命名約定的話。Ember.js在這方面很突出。因此，如果我們在應用中加入了url路由和報道，那么我們就有了這些：

報道的模板

StoriesRoute

StoriesController

請參考命名約定文檔來理解Ember的命名約定。

本節(jié)將介紹我們的示例應用中將涉及的四個EmberJS的核心概念：

模型：模型代表我們展示給用戶的應用領域內的對象。在上述例子中，一個報道就代表一個模型。報道，加上它的屬性，包括標題、url等，構成一個模型。模型可以通過jQuery加載服務器端的JSON數(shù)據(jù)的方式來獲取和更新，也可以通過Ember Data來獲取和更新。Ember Data是一個客戶端的ORM實現(xiàn)，可以利用它方便地對底層的持久性存儲進行CRUD操作。Ember Data提供一個倉庫接口，可以借助提供的一些適配器配置。Ember Data提供的兩個核心適配器是RESTAdapter和FixtureAdapter。在本文中，我們將使用LocalStorage適配器，該適配器將數(shù)據(jù)持久化為 HTML 5 的LocalStorage。請參閱此文檔了解詳情。

路由器和路由：路由器指定應用的所有路由。路由器將URL映射到路由。例如，當一個用戶訪問/#/story/new的時候，將渲染newstory模板。該模板展現(xiàn)了一個HTML表單。用戶可通過創(chuàng)建Ember.Route子類來定制路由。在上述例子中，用戶訪問/#/story/new將渲染一個基于newstory模板的默認模型。NewStoryRoute會負責將默認的模型分配給newstory模板。請參閱文檔了解詳情。

控制器：控制器可以做兩件事——首先它裝飾路由返回的模型，接著它監(jiān)聽用戶執(zhí)行的行動。例如，當用戶提交報道的時候，NewStoryController負責通過Ember Data API將報道的數(shù)據(jù)持續(xù)化到存儲層。請參閱文檔了解詳情。

模版：模板向用戶展示應用的界面。每個應用都有一個默認的應用模板。

EmberJS提供了一個Chrome插件，因此調試ember應用很容易。這個插件可以在 chrome web store 下載安裝。可以查看Ember團隊做的視頻了解chrome插件的詳情。

今天的示例程序的代碼可從github取得。

ember提供了一套新手裝備，因此開始使用框架非常簡單。新手套裝包括了需要用到的javascript文件（ember-*.js、jquery-*.js和handlerbars-*.js）以及示例應用。下載新手套裝，解壓縮，最后重命名為getbookmarks。

wget https://github.com/emberjs/starter-kit/archive/v1.1.2.zip
unzip v1.1.2.zip 
mv starter-kit-1.1.2/ getbookmarks

在瀏覽器中打開index.html，你會看到如下頁面：

這一步是可選的，不過如果你做了這步，那么你的生活質量將大大提高。如果你決定跳過這步，那么每次你做了改動之后都需要刷新瀏覽器。在第7天的文章，我討論了GruntJS的在線重載功能。我沒有在EmberJS里找到任何自動重載的功能，因此我決定使用GruntJS的livereload來提高效率。你需要Node、NPM和Grunt-CLI。請參考我第5天和第7天的文章了解詳情。

在getbookmarks文件夾內創(chuàng)建package.json，內容如下：

{
  "name": "getbookmarks",
  "version": "0.0.1",
  "description": "GetBookMarks application",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.3"
  }
}

創(chuàng)建Gruntfile.js，內容如下：

module.exports = function(grunt) {


  grunt.initConfig({

    watch :{
      scripts :{
        files : ["js/app.js","css/*.css","index.html"],
        options : {
          livereload : 9090,
        }
      }
    }

  });

  grunt.loadNpmTasks("grunt-contrib-watch");

  grunt.registerTask("default", []);  
};

使用npm安裝依賴：

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev

在index.html的頭部加入：

調用grunt watch命令，同時在你的默認瀏覽器中打開index.html。

; grunt watch
Running "watch" task
Waiting...OK

修改index.html，無需刷新就能看到改變：

在新手模板中，除了css之外，有兩個和應用相關的文件——index.html和app.js。為了理解模板應用的作用，我們需要理解app.js。

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ["red", "yellow", "blue"];
  }
});

解釋下以上的代碼：

第一行創(chuàng)建了一個Ember應用的實例。

使用App.Route.map定義應用的路由。每個Ember應用都有一個默認路由Index，綁定到/。所以，當調用/路由的時候，index模板將被渲染。index模板由index.html定義。感覺到了很多“約定大于配置”了吧？

在Ember中，每個模板都有一個model作為支持。路由負責制定哪個mobdel支持哪個模板。在上述app.js中，IndexRoute返回一個字符串數(shù)組，作為index模板的model。index模板迭代這個數(shù)組然后渲染一個列表。

移除js/app.js中的代碼，然后用以下內容替換：

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

相應地，將index.html的內容替換為：

我們將使用twitter bootstrap來給應用添加樣式。從官網(wǎng)下載twitter bootstrap包，然后復制bootstrap.css到css文件夾，同時復制字體文件夾。

接著在index.html中加入bootstrap.css，在頁首使用一個固定位置的導航條。

上述html中，

訪問#/story/new即可查看表單：

App.ApplicationAdapter = DS.LSAdapter.extend({
  namespace: "stories"
});

App.Story = DS.Model.extend({
    url : DS.attr("string"),
    tags : DS.attr("string"),
    fullname : DS.attr("string"),
    title : DS.attr("string"),
    excerpt : DS.attr("string"),
    submittedOn : DS.attr("date")

});

App.NewstoryController = Ember.ObjectController.extend({

 actions :{
    save : function(){
        var url = $("#url").val();
        var tags = $("#tags").val();
        var fullname = $("#fullname").val();
        var title = $("#title").val();
        var excerpt = $("#excerpt").val();
        var submittedOn = new Date();
        var store = this.get("store");
        var story = store.createRecord("story",{
            url : url,
            tags : tags,
            fullname : fullname,
            title : title,
            excerpt : excerpt,
            submittedOn : submittedOn
        });
        story.save();
        this.transitionToRoute("index");
    }
 }
});

App.IndexRoute = Ember.Route.extend({
    model : function(){
        var stories = this.get("store").findAll("story");
        return stories;
    }
});

App.IndexController = Ember.ArrayController.extend({
    sortProperties : ["submittedOn"],
    sortAscending : false
});

App.Router.map(function() {
    this.resource("index",{path : "/"},function(){
        this.resource("story", { path:"/stories/:story_id" });
    });

    this.resource("newstory" , {path : "story/new"});

});

App.StoryRoute = Ember.Route.extend({
    model : function(params){
        var store = this.get("store");
        return store.find("story",params.story_id);
    }
});

Ember.Handlebars.helper("format-date", function(date){
    return moment(date).fromNow();
});