[譯] 第二十四天：Yeoman Ember - 缺失的指南

時間  2019-11-09
標籤 第二十 四天 4天 yeoman ember 缺失 指南 欄目 Google 简体版
原文   原文鏈接

前言

到目前爲止 ，這個系列咱們探討了Bower, AngularJS, GruntJS, PhoneGap, Meteor, Ember和TimelineJS JavaScript技術。今天的30天挑戰，我決定學習一款叫Yeoman的高效前端開發工具。本文，咱們先了解Yeoman基礎，而後用Yeoman開發一個Ember應用，這裏再也不講EmberJS基礎，你可參考第19天的博客。 css

 

什麼是Yeoman?

Yeoman是一個開源的高效客戶端開發工具，它集成了工具和框架，有助於開發者快速高效並遵循最好的用戶體驗構建web應用。它的靈感來自Ruby on Rails 概念。Yeoman包含三個工具：html

  1. Yo: 一個基架工具，當你須要開始新項目時爲你生成全部架構模板，它避免了樣板代碼，利於開始新項目和配置grunt任務。
  2. Grunt: 基於JavaScript的命令行構建工具，幫你自動完成須要重複的任務。你能夠把它看做JavaScript的Make或者Ant. 它能夠執行像壓縮，編譯，單元測試，代碼審查等任務，詳細內容參考第5天關於GruntJS的博客。
  3. Bower: 客戶端包管理工具，可用做搜索，安裝，卸載web資源如JavaScript, HTML和CSS. 它不是一款封閉的工具，爲使用這種技術的開發者提供了大量選擇。詳細內容參考第1天關於Bower的博客。 

我爲何關注Yeoman?

若是你要說服本身學習Yeoman, 能夠看看它網站上whyyeoman部分。 前端

前提準備

安裝Yeoman以前先安裝：node

  1. Node: Yeoman須要NPM. NPM是一個node包管理，綁定在Nodejs安裝中，因此，請從 http://nodejs.org 下載最新的node.js.
  2. Git: 須要git來從git倉庫獲取有些包的代碼，因此，安裝git. 

安裝Yeoman

準備條件作好後，你能夠輸入如下命令安裝yeoman.git

$ npm install -g yeoman
View Code

以上命令會全局安裝yeoman, -g 表明全局安裝，若是你還沒裝Grunt和bower, 這也會給你安裝好。 github

安裝Yeoman Ember Generator

Yeoman依賴Generators完成web基架，對現代JavaScript MV*框架有多種generators, 咱們用Ember generator. NPM用於安裝generators.web

$ npm install -g generator-ember.
View Code

程序用例

本文咱們開發個網摘程序容許用戶發佈和分享連接，你能夠查看在線程序，和第19天的同樣，能夠參考以前的用例來了解。 npm

Github倉庫

今天的demo放在 github: day24-yeoman-emberjs-demo. json

建立Ember程序

講完基礎後咱們來開始開發程序。 bootstrap

在機器上新建目錄，更改程序目錄。

$ mkdir getbookmarks

$ cd getbookmarks
View Code

而後運行yo ember, 它會問你是否想用Twitter Bootstrap, 通常個人程序都用它，因此我輸入Yes.

$ yo ember

 

     _-----_

    |       |

    |--(o)--|   .--------------------------.

   ---------  |    Welcome to Yeoman,    |

    ( __ )   |   ladies and gentlemen!  |

    /___A___\   '__________________________'

     |  ~  |

   __'.___.'__

 

 

[?] Would you like to include Twitter Bootstrap for Sass? Yes
View Code

輸入yes後，Yeoman會給出Ember程序架構，自動運行bower和npm安裝程序所需的依賴。 

來看看Yeoman生成的Ember程序，這個程序有三個頂層目錄：app, node_modules, test. 還有配置文件--.bowerrc, .gitignore, .jshintrc, Gruntfile.js, package.json. 程序結構如圖。

 

全部程序特定代碼都砸app目錄，這個程序架構遵循Ember最佳體驗。

 

  1. Bower_components目錄存放全部客戶端依賴，如Ember, Twitter Boostrap等，Bower在這個文件夾安裝全部依賴，這個路徑能夠改到 .bowerrc文件夾。
  2. images目錄存放全部特定圖片，Yeoman優化這個目錄的全部圖片。
  3. Index.html文件包含全部ember.js依賴並按序排列，全部bootstrap依賴，和Gruntfile.js用於替換(或者移除)引用到non-optimized腳本或者HTML文件裏的格式表單的'build'註釋。
  4. scripts目錄包含全部Ember程序控制器，視圖，模型和路由。
  5. styles目錄有程序指定的css文件，這個css導入bootstrap格式。
  6. templates目錄包含程序handlebar模板。 

如今，運行啓動內嵌的預覽服務器，grunt服務器採用我第7天講到的livereload.

$ grunt server
View Code

這會在默認瀏覽器裏打開程序。

 

生成Story模型

第19天開發的GetBookmarks程序有一個Ember模型叫Story,Yeoman subgenerator可用於生成更小的Story模型，要生成Story模型，執行如下命令。

$ yo ember:model Story
View Code

輸出以下。

create app/scripts/models/story_model.js
   invoke   ember:controller:/usr/local/lib/node_modules/generator-ember/model/index.js
   create     app/scripts/controllers/stories_controller.js
   create     app/scripts/controllers/story_edit_controller.js
   create     app/scripts/routes/stories_route.js
   create     app/scripts/routes/story_route.js
   create     app/scripts/routes/story_edit_route.js
   invoke       ember:view:/usr/local/lib/node_modules/generator-ember/controller/index.js
   create         app/scripts/views/story_view.js
   create         app/scripts/views/story_edit_view.js
   create         app/scripts/views/stories_view.js
   create         app/templates/story.hbs
   create         app/templates/story_edit.hbs
   create         app/templates/stories.hbs
   create         app/scripts/views/bound_text_field_view.js
   invoke       ember:router:/usr/local/lib/node_modules/generator-ember/controller/index.js
 conflict         app/scripts/router.js
[?] Overwrite app/scripts/router.js? overwrite
    force         app/scripts/router.js
View Code

這會在app/scripts/models 目錄下生成story_model.js, 連同還生成相應的視圖，控制器和路由。若是你對此不太瞭解可參照我第19天的博客。 

用如下代碼更新story_model.

Emberapp.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')
});
View Code

請重啓Grunt 服務器以使改動生效。 

安裝Ember LocalStorage適配器

咱們用HTML 5 LocalStorage存儲數據，用bower安裝適配器。

$ bower install --save ember-localstorage-adapter
View Code

而後更新index.html依賴

<script src="bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script>
View Code

同時用如下代碼更新app/scripts/store.js.這會用LSAdapter(Local Storage Adapter)而不是FixtureAdapter配置程序。

Getbookmarks.Store = DS.Store.extend();
Getbookmarks.ApplicationAdapter = DS.LSAdapter.extend({
  namespace: 'stories'
});
View Code

更新路由

用如下代碼替換router.js.

Getbookmarks.Router.map(function () {
  this.resource('index',{path : '/'});
  this.resource('story', { path: '/story/:story_id' });
  this.resource('story_edit', { path: '/story/new' });
});
View Code

以上代碼，咱們定義了三個路由。

  1. index路由對應的根路徑。
  2. 查看獨立文章用story路由。
  3. 用story_edit路由新建文章，當用戶查看'#/story/new', 一個表格會顯示給用戶。 

提交新Story

如今添加表格，用於用戶打開'#/story/new'時顯示，用如下代碼更新 app/templates/story_edit.hbs. 

<form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="title" class="col-sm-2 control-label">Title</label>
        <div class="col-sm-10">
          <input type="title" class="form-control" id="title" name="title" placeholder="Title of the link" required>
        </div>
      </div>
      <div class="form-group">
        <label for="excerpt" class="col-sm-2 control-label">Excerpt</label>
        <div class="col-sm-10">
          <textarea class="form-control" id="excerpt" name="excerpt" placeholder="Short description of the link" required></textarea>
        </div>
      </div>
      <div class="form-group">
        <label for="url" class="col-sm-2 control-label">Url</label>
        <div class="col-sm-10">
          <input type="url" class="form-control" id="url" name="url" placeholder="Url of the link" required>
        </div>
      </div>
      <div class="form-group">
        <label for="tags" class="col-sm-2 control-label">Tags</label>
        <div class="col-sm-10">
          <textarea id="tags" class="form-control" name="tags" placeholder="Comma seperated list of tags" rows="3" required></textarea>
        </div>
      </div>
      <div class="form-group">
        <label for="fullname" class="col-sm-2 control-label">Full Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="fullname" name="fullname" placeholder="Enter your Full Name like Shekhar Gulati" required>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-success" {{action 'save'}}>Submit Story</button>
        </div>
      </div>
  </form>
View Code

如今打開 http://localhost:9000/#/story/new 能夠看到提交表格。 

更新 StoryEditController save功能，會把文章保存到本地存儲中。

Getbookmarks.StoryEditController = Ember.ObjectController.extend({
  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');
        console.log('Store .. '+store);
        var story = store.createRecord('story',{
            url : url,
            tags : tags,
            fullname : fullname,
            title : title,
            excerpt : excerpt,
            submittedOn : submittedOn
        });
    story.save();
    this.transitionToRoute('index');
  }
});
View Code

列出全部文章

接下來的功能是實如今側邊欄顯示文章列表。 

在application_route.js, 咱們會從本地存儲中獲取全部文章。

Getbookmarks.ApplicationRoute = Ember.Route.extend({
    model : function(){
        var stories = this.get('store').findAll('story');
        return stories;
    }
});
View Code

接下來更新application.hbs加載文章標題和連接，用如下代碼更新。

<div>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">GetBookmarks</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav pull-right">
                <li>{{#link-to 'story_edit'}}<span class="glyphicon glyphicon-plus"></span> Submit Story{{/link-to}}</li>
            </ul>
        </div>
    </nav>
    <div class="container" id="main">
        <div class="row">
            <div>
                <div class="col-md-3">
                    <div class="well sidebar-nav">
                        <table class='table'>
                          <thead>
                            <tr><th>Recent Stories</th></tr>
                          </thead>
                          {{#each controller}}
                            <tr><td>
                            {{#link-to 'story' this}}
                              {{title}}
                            {{/link-to}}
                            </td></tr>
                          {{/each}}
                        </table>
                    </div>
                </div>
                <div class="col-md-9">
                    {{outlet}}
                </div>
            </div>
        </div>
    </div>
</div>
View Code

程序界面會從新加載更新。 

查看單獨文章

最後一個功能是當用戶打開 http://localhost:9000/#/story/:id 會顯示單獨的文章，:id對應文章id, 用如下代碼更新story_route.js.

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

用如下代碼更新 app/templates/story.hbs.

<h1>{{title}}</h1>
<h2> by {{fullname}} <small class="muted">{{submittedOn}}</small></h2>
{{#each tagnames}}
  <span class="label label-primary">{{this}}</span>
{{/each}}
<hr>
<p class="lead">
      {{excerpt}}
</p>
View Code

構建產品

最後，運行grunt build命令生成一個分佈式程序，grunt build命令使用app目錄下的源代碼文件，返回到dist下的分佈式程序中。

$ grunt build
View Code

這就是今天的內容，繼續給反饋吧。 

原文：https://www.openshift.com/blogs/day-24-yeoman-ember-the-missing-tutorial

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程