摘要：文章來源發(fā)布項目，加入功能接著前面三篇環(huán)境搭建以及使用創(chuàng)建第一個靜態(tài)頁面引入計算屬性動態(tài)內(nèi)容模型，保存數(shù)據(jù)到數(shù)據(jù)庫應(yīng)用發(fā)布發(fā)布方式一發(fā)布的詳細教程請看。執(zhí)行如下命令發(fā)布項目。

文章來源：發(fā)布項目，加入CRUD功能

接著前面三篇：

環(huán)境搭建以及使用Ember.js創(chuàng)建第一個靜態(tài)頁面

引入計算屬性、action、動態(tài)內(nèi)容

模型，保存數(shù)據(jù)到數(shù)據(jù)庫

發(fā)布方式一

發(fā)布的詳細教程請看guide on firebase。執(zhí)行如下命令發(fā)布項目。

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

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

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

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

發(fā)布方式二

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

打包項目

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

復(fù)制打包后的文件到服務(wù)器上

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

運行項目

復(fù)制到服務(wù)器之后啟動服務(wù)器，直接訪問：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會出現(xiàn)錯誤，因為還沒定義路由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命令創(chuàng)建，就不手動創(chuàng)建了。執(zhí)行命令：ember g route libraries/edit創(chuàng)建路由和路由對應(yīng)的模板。
創(chuàng)建完成之后還需要手動修改app/router.js文件，內(nèi)容如下：

// 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是一個動態(tài)段，會根據(jù)實際的URL變化
    this.route("edit", { path: "/:library_id/edit" });
  });
});

export default Router;

注意this.route("edit", { path: "/:library_id/edit" });這行代碼的設(shè)置。與普通的路由稍有不同這里增加了一個參數(shù)，并且參數(shù)內(nèi)使用path設(shè)定路由渲染之后edit會被/:library_id/edit替換。
編譯、渲染之后的URL格式為http://example.com/libraries/1234/edit其中:library_id這是一個動態(tài)段，這個URL例子中動態(tài)段library_id的值就是1234，并且可以在路由類中獲取這個動態(tài)段的值。
更多有關(guān)動態(tài)段的介紹請看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) {
    // 獲取動態(tài)段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);的意思是根據(jù)模型的id屬性值查詢某個記錄，其中library_id就是動態(tài)段的值，這個值是Ember解析URL得到的。正如前面所說：http://example.com/libraries/1234/edit這個URL動態(tài)段的值就是1234。
Ember會自動根據(jù)URL的格式解析得到。并且可以在路由類中獲取。默認情況下動態(tài)段的值是數(shù)據(jù)的id值。代碼中的另外兩個方法saveLibrary()和willTransition()在前一篇文章模型，保存數(shù)據(jù)到數(shù)據(jù)庫已經(jīng)介紹過，在此不再贅述。
方法willTransition()的作用就是：當(dāng)用戶修改了數(shù)據(jù)之后沒有點擊保存就離開頁面時會提示用戶是否確認不保存就離開頁面！通過控制器中的屬性hasDirtyAttributes判斷頁面的值是否發(fā)生了變化。方法rollbackAttributes()會重置model中的值。方法abourt()可以阻止路由的跳轉(zhuǎn)，有關(guān)路由的跳轉(zhuǎn)請看Ember.js 入門指南之二十四終止與重試路由跳轉(zhuǎn)。從new.hbs復(fù)制代碼到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
        
    

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

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

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

成功保存了修改的內(nèi)容。到此實現(xiàn)了修改功能。

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

// app/routes/libraries/index.js

import Ember from "ember";

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

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

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

選中確定之后刪除就會立刻刪除，列表上的數(shù)據(jù)也會動態(tài)更新。

參照library的功能實現(xiàn)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" });
  });
});

省略其他內(nèi)容，僅僅列出修改部分。

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) {
    // 獲取動態(tài)段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();
        }
      }
    }
  }
});

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

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