Ember.js 入門指南——model簡介1

本篇內容較多，拆分爲兩篇！

Ember官網用了大篇幅來介紹model，相比以前的controller簡直就是天壤之別啊！

       從本篇開始學習Ember的模型，這一章也是Ember基礎部分的最後一章內容，很是的重要（無論你信不信反正我是信了）。

 

在開始學習model以前先作好準備工做：

從新建立一個Ember項目，仍舊使用的是Ember CLI命令建立。

ember new chapter6_models

cd chapter6_models

ember server

在瀏覽器執行項目，看到以下信息說明項目搭建成功。

Welcome to Ember

 

本章演示所用到的代碼均可以從https://github.com/ubuntuvim/my_emberjs_code/tree/master/chapter6_models獲取。

 

       在介紹model以前先在項目中引入firebase。相關的配置教材請移步這裏（若是沒法加載頁面請先在https://www.firebase.com/註冊用戶）。firebase的官網提供了專門用於Ember的版本，還提供了很是簡單的例子。從安裝到整合都給出了很是詳細代碼教程。

下面是個人整合步驟（命令都是在項目目錄下執行的）：

1，安裝

ember install emberfire

安裝完成以後會自動建立adapter（app/adapters/application.js），對於這個文件不須要作任何修改，官網提供的代碼也許跟你的項目的代碼不一樣，應該是官網的版本是舊版的。

2，配置config/environment.js

修改第八行firebase: 'https://YOUR-FIREBASE-NAME.firebaseio.com/'。這個地址是你註冊用戶時候獲得的。你能夠從這裏查看你的地址。好比下圖所示位置

 

3，再在config/enviroment.js的APP:{}(大概第20行)後面新增以下代碼

APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' *",
      'font-src': "'self' *",
      'connect-src': "'self' *",
      'img-src': "'self' *",
      'style-src': "'self' 'unsafe-inline' *",
      'frame-src': "*"
    }

 

而後再註釋掉第7行原有屬性（安裝firebase自動生成的，可是配置不夠完整）：contentSecurityPolicy。

 

或者你能夠按照個人配置文件設置：

/* jshint node: true */
 
module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'chapter6-models',
    environment: environment,
    // contentSecurityPolicy: { 'connect-src': "'self' https://auth.firebase.com wss://*.firebaseio.com" },
    firebase: '你的firebase鏈接',
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },
 
    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' *",
      'font-src': "'self' *",
      'connect-src': "'self' *",
      'img-src': "'self' *",
      'style-src': "'self' 'unsafe-inline' *",
      'frame-src': "*"
    }
  };
 
  // 其餘代碼省略……
  return ENV;
};

若是不作這個配置啓動項目以後瀏覽器會提示一堆的錯誤。主要是一些訪問權限問題。配置完以後須要重啓項目才能生效！

1，簡介

       model是一個用於向用戶呈現底層數據的對象。不一樣的應用有不一樣的model，這取決於解決的問題須要什麼樣的model就定義什麼樣的model。

       model一般是持久化的。這也就意味着用戶關閉了瀏覽器窗口model數據不該該丟失。爲了確保model數據不丟失，你須要存儲model數據到你所指定的服務器或者是本地數據文件中。

       一種很是常見的狀況是，model數據會以JSON的格式經過HTTP發送到服務器並保存在服務中。Ember還未開發者提供了一種更加簡便的方式：使用IndexedDB（使用在瀏覽器中的數據庫）。這種方式是把model數據保存到本地。或者使用Ember Data，又或者使用firebase，把數據直接保存到遠程服務器上，後續的文章我將引入firebase，把數據保存到遠程服務器上。

       Ember使用適配器模式鏈接數據庫，能夠適配不一樣類型的後端數據庫而不須要修改任何的網絡代碼。你能夠從emberobserver上看到幾乎全部Ember支持的數據庫。

       若是你想把你的Ember應用與你的遠程服務器整合，幾遍遠程服務器API返回的數據不是規範的JSON數據也沒關係，Ember Data能夠配置任何服務器返回的數據。

       Ember Data還支持流媒體服務器，好比WebSocket。你能夠打開一個socket鏈接遠程服務器，獲取最新的數據或者把變化的數據推送到遠程服務器保存。

       Ember Data爲你提供了更加簡便的方式操做數據，統一管理數據的加載，下降程序複雜度。

 

       對於model與Ember Data的介紹就到此爲止吧，官網用了大量篇幅介紹Model，在此我就不一一寫出來了！太長了，寫出來也沒人看的！！！若是有興趣本身看吧！點擊查看詳細信息。 

 

下面先看一個簡單的例子，由這個例子延伸出有關於model的核心概念。這些代碼是舊版寫法，僅僅是爲了說明問題，本文也不會真正執行。

//  app/components/list-of-drafts.js
export default Ember.Component.extend({
       willRender() {
              // ECMAScript 6語法
              $.getJSON('/drafts').then(data => {
                     this.set('drafts', data);
              });
       }
});

定義了一個組件類。並在組件類中獲取json格式數據。

下面是組件對應的模板文件。

<!-- app/templates/components/list-of-drafts.hbs  -->
<ul>
       {{#each drafts key="id" as |draft|}}
       <li>{{draft.title}}</li>
       {{/each}}
</ul>

 

再定義另一個組件類和模板

//  app/components/list-button.js
export default Ember.Component.extend({
            willRender() {
                        // ECMAScript 6語法
                        $.getJSON('/drafts').then(data => {
                                    this.set('drafts', data);
                        });
            }
});

<!-- app/templates/components/ list-button.hbs  -->
{{#link-to ‘drafts’ tagName=’button’}}
Drafts ({{drafts.length}})
{{/link-to}}

            組件list-of-drafts類和組件list-button類是同樣的，可是他們的對應的模板卻不同。可是都是從遠程服務器獲取一樣的數據。若是沒有Store（model核心內容之一）那麼每次這兩個模板渲染都會是組件類調用一次遠程數據。而且返回的數據是同樣的。這無形中增長了沒必要要的請求，暫用了沒必要要的寬帶，用戶體驗也很差。可是有了Store就不同了，你能夠把Store理解爲倉庫，每次執行組件類時先到Store中獲取數據，若是沒有再去遠程獲取。當在其中一個組件中改變某些數據，數據的更改也能理解反應到另外一個獲取此數據的組件上（與計*算屬性自動更新同樣），而這個組件不須要再去服務請求才能獲取最新更改過的數據。

 

下面的內容將爲你一一介紹Ember Data最核心的幾個東西：models、records、adapters、store。

Ember.js 入門指南——model簡介2