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

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

接著前面三篇：

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

引入計(jì)算屬性、action、動(dòng)態(tài)內(nèi)容

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

發(fā)布方式一

發(fā)布的詳細(xì)教程請(qǐng)看guide on firebase。執(zhí)行如下命令發(fā)布項(xiàng)目。

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

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

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

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

發(fā)布方式二

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

打包項(xiàng)目

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

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

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

運(yùn)行項(xiàng)目

復(fù)制到服務(wù)器之后啟動(dòng)服務(wù)器，直接訪問：http://localhost:8080

修改項(xiàng)目的library列表頁(yè)面，增加刪除和修改功能。

## 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}}

相比原來的代碼增加了一個(gè)連接和一個(gè)按鈕，分別用于編輯和刪除library信息。相對(duì)于需要增加一個(gè)路由libraries/edit和一個(gè)處理的動(dòng)作{{action "deleteLibrary"}}。
如果此時(shí)運(yùn)行http://localhost:4200/libraries會(huì)出現(xiàn)錯(cuò)誤，因?yàn)檫€沒定義路由libraries/edit和action。別急，先一步步來，下面先增加一些css樣式。

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

body {
  padding-top: 20px;
}

html {
  overflow-y: scroll;
}

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

簡(jiǎn)單起見直接使用Ember CLI命令創(chuàng)建，就不手動(dòng)創(chuàng)建了。執(zhí)行命令：ember g route libraries/edit創(chuàng)建路由和路由對(duì)應(yīng)的模板。
創(chuàng)建完成之后還需要手動(dò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是一個(gè)動(dòng)態(tài)段，會(huì)根據(jù)實(shí)際的URL變化
    this.route("edit", { path: "/:library_id/edit" });
  });
});

export default Router;

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

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

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

彈出提示信息。如果點(diǎn)擊取消會(huì)停留在當(dāng)前頁(yè)面，如果選中確定會(huì)跳轉(zhuǎn)到首頁(yè)（因?yàn)槲尹c(diǎn)擊的是菜單的Home）。

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

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

// app/routes/libraries/index.js

import Ember from "ember";

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

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

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

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

參照l(shuí)ibrary的功能實(shí)現(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) {
    // 獲取動(dòng)態(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();
        }
      }
    }
  }
});

運(yùn)行結(jié)果不再截圖列出，請(qǐng)讀者自行試驗(yàn)。

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