當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Day 19: EmberJS 入门指南

發布時間：2025/3/21 javascript 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day 19: EmberJS 入门指南小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

應用

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

當用戶訪問/時，他會看到以提交時間排序的報道列表。
當用戶訪問某個書簽時，例如#/stories/d6p88，用戶會看到關于這個報道的信息，例如是誰提交的，何時提交的，以及文章的摘要。
最后，當用戶通過#/story/new提交新報道時，內容會存儲在用戶瀏覽器的本地存儲上。

什么是Ember？

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

報道的模板
StoriesRoute
StoriesController

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

Ember核心概念

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

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

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

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

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

Ember的Chrome插件

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

Github倉庫

今天的示例程序的代碼可從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，你會看到如下頁面：

第二步啟用GruntJS監視

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

在getbookmarks文件夾內創建package.json，內容如下：

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

創建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'];} });

解釋下以上的代碼：

第一行創建了一個Ember應用的實例。

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

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

第四步移除新手模板代碼

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

App = Ember.Application.create();App.Router.map(function() {// put your routes here });

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GetBookMarks -- Share your favorite links online</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/style.css"><script src="http://localhost:9090/livereload.js"></script> </head> <body><script type="text/x-handlebars">{{outlet}}</script><script type="text/x-handlebars" data-template-name="index"></script><script src="js/libs/jquery-1.9.1.js"></script><script src="js/libs/handlebars-1.0.0.js"></script><script src="js/libs/ember-1.1.2.js"></script><script src="js/app.js"></script></body> </html>

第五步添加Twitter Bootstrap

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GetBookMarks -- Share your favorite links online</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><link rel="stylesheet" href="css/style.css"><script src="http://localhost:9090/livereload.js"></script> </head> <body><script type="text/x-handlebars"><nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="#">GetBookMarks</a></div></div></nav><div id="main" class="container">{{outlet}}</div></script><script type="text/x-handlebars" data-template-name="index"></script><script src="js/libs/jquery-1.9.1.js"></script><script src="js/libs/handlebars-1.0.0.js"></script><script src="js/libs/ember-1.1.2.js"></script><script src="js/app.js"></script></body> </html>

上述html中，<script type="text/x-handlebars">代表我們的應用模板。應用模板使用{{outlet}}標簽為其他模板預留位置，其內容取決于url。

在css/style.css中加入下面的代碼。這會在正文上方添加一個40px的空白。這樣才能正確地渲染固定位置的導航條。

body{padding-top: 40px; }

第五步提交新報道

我們將開始實現提交新報道的功能。Ember建議你圍繞著URL思考。當用戶訪問#/story/new的時候，會展示一個表單。

在App.Router.Map中增加一個綁定#/story/new的新路由：

App.Router.map(function() {this.resource('newstory' , {path : 'story/new'}); });

接著我們在index.html中添加一個渲染表單的newstory模板：

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

接著我們在導航條中添加一個鏈接，這樣訪問報道提交表單就很容易。替換一下nav元素：

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="#">GetBookMarks</a></div><ul class="nav navbar-nav pull-right"><li>{{#link-to 'newstory'}}<span class="glyphicon glyphicon-plus"></span> Submit Story{{/link-to}}</li></ul></div></nav>

注意上面我們用{{#link-to}}創建了一個指向路由的鏈接。請參閱文檔了解詳情。

表單已經有了，接下來要添加HTML 5本地存儲的功能。為了添加本地存儲支持，我們需要首先下載Ember Data和Local Storage Adapter JavaScript文件。將這些文件放在js/libs下。接著，在index.html中添加這些script標簽。

如前所述，Ember Data是一個客戶端的ORM實現，它使在底層存儲進行CRUD操作很容易。這里我們將使用LSAdapter。在app.js中加入：

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

接著是定義model。一篇報道需要有url、title（標題）、fullname（提交報道的用戶的全名）、excerpt（摘要），以及SubmittedOn（日期）信息。在下面的模型中，我們使用了字符串和日期類型。適配器默認支持的屬性類型為字符串、數字、布爾值和日期。

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')});

接著我們編寫NewstoryController來持久化內容：

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');}} });

以上代碼展示了如何從獲取表單中的值，然后使用store API在內存中創建記錄。為了在localstorage中存儲記錄，我們需要調用Story對象的save方法。最后，我們將用戶重定向到index路由。

接著我們測試下這個應用，創建一個新的報道，接著打開Chrome開發者工具，在資源區域你可以查看這則報道。

第六步顯示所有報道

接著我們要做的是，當用戶訪問首頁的時候，展示所有報道。

正如我之前提到的，路由負責詢問model。我們將加上IndexRoute，它會找出本地存儲中保存的所有報道。

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

每個路由支持一個模板。IndexRoute支持index模板，因此我們需要修改index.html：

現在訪問/，我們會看到一個報道的列表：

還有一個問題，報道沒有按照時間順序排列。我們將創建一個IndexController負責排序。我們指定依照submittedOn屬性倒序排列，以確保新的報道出現在上面。

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

修改之后，我們會看到按照submittedOn屬性排序的報道。

第七步查看單獨的報道

最后要實現的功能是：用戶點擊某則報道的時候會看到詳細信息。我們加一個路由：

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

以上的代碼展示了如何嵌套路由。

:story_id部分叫做動態字段，因為相應的報道 id會被注入URL。

然后我們添加根據報道id獲取報道的StoryRoute。

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

最后，我們更新下index.html，給每個報道添加鏈接：

修改完畢地后，可以在瀏覽器中直接看到結果。

第八步為submittedOn日期添加格式

Ember下有輔助函數的概念。所有Handlebars模板都可以調用輔助函數。

我們將使用moment.js庫為日期添加格式。將以下代碼加入index.html。

接著我們將定義我們的第一個輔助函數，該函數將日期轉為人類可讀的形式：

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

最后我們在報道模板中加入format-data輔助函數。

報道頁面的效果如下：

今天就到這里了。持續反饋。

原文 Day 19: Ember--The Missing EmberJS Tutorial
翻譯 SegmentFault

總結

以上是生活随笔為你收集整理的Day 19: EmberJS 入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Day 18: BoilerPipe —
下一篇： Day 20: 斯坦福CoreNLP —

javascript

Day 19: EmberJS 入门指南

應用

什么是Ember？

Ember核心概念

Ember的Chrome插件

Github倉庫

第一步 下載新手套裝

第二步 啟用GruntJS監視

第三步 理解新手模板應用

第四步 移除新手模板代碼

第五步 添加Twitter Bootstrap

第五步 提交新報道

第六步 顯示所有報道

第七步 查看單獨的報道

第八步 為submittedOn日期添加格式

總結