摘要：文章來源發布項目，加入功能接著前面三篇環境搭建以及使用創建第一個靜態頁面引入計算屬性動態內容模型，保存數據到數據庫應用發布發布方式一發布的詳細教程請看。執行如下命令發布項目。

文章來源：發布項目，加入CRUD功能

接著前面三篇：

環境搭建以及使用Ember.js創建第一個靜態頁面

引入計算屬性、action、動態內容

模型，保存數據到數據庫

發布方式一

發布的詳細教程請看guide on firebase。執行如下命令發布項目。

npm install -g firebase-tools
ember build --prod
firebase login
firebase init

執行命令過程需要輸入一個public的目錄，輸入dist后按enter。更新firebase.json的內容。

{
  "firebase": "YOUR-APP-NAME",
  "public": "dist",
  "rewrites": [{
    "source": "**",
    "destination": "/index.html"
  }]
}

遺憾的是在我電腦上一直提示沒有firebase命令，即使我已經安裝了這個插件也不行。

發布方式二

由于上述方式無法發布想到到firebase，所以使用最原始的發布方式，使用ember命令打包項目。然后自己把項目部署到服務器上。

打包項目

打包項目使用命令ember build --prod，等到命令執行完畢后再項目的dist目錄下的所有文件即使打包后的項目文件。

復制打包后的文件到服務器上

得到打包后的文件后可以直接把這些文件復制到服務器上運行，比如復制到tomcat的webapps目錄下。

運行項目

復制到服務器之后啟動服務器，直接訪問：http://localhost:8080

修改項目的library列表頁面，增加刪除和修改功能。

## List


  {{#each model as |library|}}
    

      

          


### {{library.name}}

          
          


Address: {{library.address}}

Phone: {{library.phone}}

          
          

              {{#link-to "libraries.edit" library.id class="btn btn-success btn-xs"}}Edit{{/link-to}}
              Delete
          
      
    
  {{/each}}

相比原來的代碼增加了一個連接和一個按鈕，分別用于編輯和刪除library信息。相對于需要增加一個路由libraries/edit和一個處理的動作{{action "deleteLibrary"}}。
如果此時運行http://localhost:4200/libraries會出現錯誤，因為還沒定義路由libraries/edit和action。別急，先一步步來，下面先增加一些css樣式。

# app/styles/app.scss
@import "bootstrap";

body {
  padding-top: 20px;
}

html {
  overflow-y: scroll;
}

.library-item {
  min-height: 150px;
}

簡單起見直接使用Ember CLI命令創建，就不手動創建了。執行命令：ember g route libraries/edit創建路由和路由對應的模板。
創建完成之后還需要手動修改app/router.js文件，內容如下：

// app/router.js

import Ember from "ember";
import config from "./config/environment";

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {

  this.route("about");
  this.route("contact");

  this.route("admin", function() {
    this.route("invitation");
    this.route("contact");
  });

  this.route("libraries", function() {
    this.route("new");
    // :library_id是一個動態段，會根據實際的URL變化
    this.route("edit", { path: "/:library_id/edit" });
  });
});

export default Router;

注意this.route("edit", { path: "/:library_id/edit" });這行代碼的設置。與普通的路由稍有不同這里增加了一個參數，并且參數內使用path設定路由渲染之后edit會被/:library_id/edit替換。
編譯、渲染之后的URL格式為http://example.com/libraries/1234/edit其中:library_id這是一個動態段，這個URL例子中動態段library_id的值就是1234，并且可以在路由類中獲取這個動態段的值。
更多有關動態段的介紹請看Ember.js 入門指南之十三{{link-to}} 助手或者Dynamic Segments。

配置完路由之后修改路由libraries/edit.js的代碼。

// app/routes/libraries/edit.js
import Ember from "ember";

export default Ember.Route.extend({

  model(params) {
    // 獲取動態段library_id的值 
    return this.store.findRecord("library", params.library_id);
  },

  actions: {

    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo("libraries"));
    },

    willTransition(transition) {

      let model = this.controller.get("model");

      if (model.get("hasDirtyAttributes")) {
        let confirmation = confirm("Your changes haven"t saved yet. Would you like to leave this form?");

        if (confirmation) {
          model.rollbackAttributes();
        } else {
          transition.abort();
        }
      }
    }
  }
});

代碼this.store.findRecord("library", params.library_id);的意思是根據模型的id屬性值查詢某個記錄，其中library_id就是動態段的值，這個值是Ember解析URL得到的。正如前面所說：http://example.com/libraries/1234/edit這個URL動態段的值就是1234。
Ember會自動根據URL的格式解析得到。并且可以在路由類中獲取。默認情況下動態段的值是數據的id值。代碼中的另外兩個方法saveLibrary()和willTransition()在前一篇文章模型，保存數據到數據庫已經介紹過，在此不再贅述。
方法willTransition()的作用就是：當用戶修改了數據之后沒有點擊保存就離開頁面時會提示用戶是否確認不保存就離開頁面！通過控制器中的屬性hasDirtyAttributes判斷頁面的值是否發生了變化。方法rollbackAttributes()會重置model中的值。方法abourt()可以阻止路由的跳轉，有關路由的跳轉請看Ember.js 入門指南之二十四終止與重試路由跳轉。從new.hbs復制代碼到edit.hbs，然后在稍加修改。

## Edit Library


    

        Name
        

          {{input type="text" value=model.name class="form-control" placeholder="The name of the Library"}}
        
    
    

        Address
        

          {{input type="text" value=model.address class="form-control" placeholder="The address of the Library"}}
        
    
    

        Phone
        

          {{input type="text" value=model.phone class="form-control" placeholder="The phone number of the Library"}}
        
    
    

        

            Save changes
        
    

等待項目重啟完成，進入到修改界面，任意修改界面上的數據，不點擊保存然后任意點擊其他鏈接會彈出提示，詢問你是否確認離開頁面。操作步驟如下截圖。

注意：看瀏覽器的URL。首頁模板代碼{{#link-to "libraries.edit" library.id class="btn btn-success btn-xs"}}Edit{{/link-to}}中的路由libraries.edit渲染之后會得到形如libraries/xxx/edit的URL，其中xxx就是動態段的值。

彈出提示信息。如果點擊取消會停留在當前頁面，如果選中確定會跳轉到首頁（因為我點擊的是菜單的Home）。

成功保存了修改的內容。到此實現了修改功能。

刪除功能比修改更加簡單，直接在方法deleteLibrary里根據id屬性值刪除數據即可。id屬性值已經在模板頁面作為參數傳遞到方法中。直接獲取即可。

// app/routes/libraries/index.js

import Ember from "ember";

export default Ember.Route.extend({
  model() {
    return this.store.findAll("library");
  },
  actions: {
      // 刪除一個library記錄
      deleteLibrary(library) {  //參數library已經在模板中傳遞過來
      let confirmation = confirm("Are you sure?");

      if (confirmation) {
        library.destroyRecord();
      }
    }
  }
});

模板中是這樣調用刪除方法的Delete，看到參數library了吧，這個參數就是一個library模型對象。
可以直接調用方法destroyRecord()實現刪除數據。

選中確定之后刪除就會立刻刪除，列表上的數據也會動態更新。

參照library的功能實現contact的刪除與修改。

ember g route admin/contact/edit
ember g template admin/contact/index

// app/router.js

this.route("admin", function() {
  this.route("invitation");
  this.route("contact", function() {
    this.route("edit", { path: "/:contact_id/edit" });
  });
});

省略其他內容，僅僅列出修改部分。

admin/contact.hbs

{{outlet}}

admin/contact/index.hbs

{{! app/templates/admin/contact/index.hbs}}

# Contacts


    {{#each model as |contact|}}
        
    {{/each}}

    

    

      

          
ID
          
E-mail
          
Message
          
Operation
      
    
    

            
{{contact.id}}
            
{{contact.email}}
            
{{contact.message}}
            

                {{#link-to "admin.contact.edit" contact.id class="btn btn-success btn-xs"}}Edit{{/link-to}}
                Delete
            
        

增加刪除、修改按鈕。

admin/contact/edit.hbs

{{! app/templates/admin/contact/edit.hbs}}


   

     

         Email address
         {{input type="email" value=model.email class="form-control col-sm-6 col--6" placeholder="Please type your e-mail address." autofocus="autofocus"}}
     
     

         Your message
         {{textarea class="form-control" placeholder="Your message. (At least 5 characters.)" rows="7" value=model.message}}
     

     Save
     {{#link-to "admin.contact" class="btn btn-default"}}Return{{/link-to}}
   

// app/routes/contact.js

import Ember from "ember";

export default Ember.Route.extend({
    model: function() {
        return this.store.findAll("contact");
    },
    actions: {
        deleteContact: function(contact) {
            let confirmation = confirm("Are you sure?");

            if (confirmation) {
              contact.destroyRecord();
            }
        }
    }
});

// app/routes/admin/contact/edit.js

import Ember from "ember";

export default Ember.Route.extend({

  model(params) {
    // 獲取動態段library_id的值
    return this.store.findRecord("contact", params.contact_id);
  },

  actions: {

    saveContact(newContact) {
      newContact.save().then(() => this.transitionTo("admin.contact"));
    },

    willTransition(transition) {

      let model = this.controller.get("model");

      if (model.get("hasDirtyAttributes")) {
        let confirmation = confirm("Your changes haven"t saved yet. Would you like to leave this form?");

        if (confirmation) {
          model.rollbackAttributes();
        } else {
          transition.abort();
        }
      }
    }
  }
});

運行結果不再截圖列出，請讀者自行試驗。

為了照顧懶人我把完整的代碼放在GitHub上，可以拿來做參照。博文經過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大！如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力！！