本節(jié)課中我們?cè)O(shè)計(jì)應(yīng)用中將會(huì)用到的檢查列表的數(shù)據(jù)模型号涯，他會(huì)和Observable進(jìn)行合作目胡。數(shù)據(jù)模型不是Ionic 2特有的東西，模型是變成里面同樣概念链快。根據(jù)內(nèi)容的不同誉己，模型的定義多變，但是總的來說模型就是用于存儲(chǔ)和代表數(shù)據(jù)的域蜗。
在Ionic 2和Angular 2中巨双，如果我們想持有某些數(shù)據(jù)的引用噪猾，我們大概需要這樣去做：

this.myDataArray = ['1', '2', '3'];

然后，如果我們是創(chuàng)建模型的話筑累，那么大概是這樣子的：

this.myDataArray = [
    new MyDataModel('1'),
    new MyDataModel('2'),
    new MyDataModel('3')
];

所以袱蜡，我們創(chuàng)建一個(gè)對(duì)象object來持有數(shù)據(jù)而不是純存儲(chǔ)。首先疼阔，可能比較難理解為什么我們要這么做戒劫，對(duì)于像上面例子這么簡單的數(shù)據(jù)看起來很復(fù)雜，但是同時(shí)會(huì)帶來很多好處婆廊。這個(gè)應(yīng)用中帶來的主要好處包括：

• 允許我們清晰的定義數(shù)據(jù)結(jié)構(gòu)
• 允許我們?cè)跀?shù)據(jù)模型里面創(chuàng)建助理函數(shù)來操作數(shù)據(jù)
• 允許我們?cè)诓煌胤街赜脭?shù)據(jù)模型迅细，簡化代碼

真切的希望本課能清晰的給你展示創(chuàng)建數(shù)據(jù)模型能夠帶來的好處，但是我體驗(yàn)說明一下這不是必需的淘邻。你也可以直接在類里面定義一些數(shù)據(jù)就可以了茵典。
我們也在數(shù)據(jù)模型中會(huì)創(chuàng)建和用到我們自己的Observable，但是我們還是在遇到他的時(shí)候再說吧宾舅。

創(chuàng)建數(shù)據(jù)模型

通常如果我們想要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)模型的話我們將創(chuàng)建一個(gè)類來定義他（基本上就是個(gè)普通對(duì)象）统阿，然后定義一些助理函數(shù)，就像這樣：

class PersonModel {

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    increaseAge(){
        this.age++;
    }

    changeName(name){
        this.name = name;
    }
}

然后筹我，我們就可以從他創(chuàng)建以系列的實(shí)例（對(duì)象）了：

let person1 = new PersonModel('Jason', 43);
let person2 = new PersonModel('Louise', 22);

然后實(shí)例有可以分別去調(diào)用助理函數(shù)：

person1.increaseAge();

Ionic 2的理念也差不多扶平，除了Ionic 2/Angular 2中我們需要?jiǎng)?chuàng)建一個(gè)Injectable（基礎(chǔ)里面講過）。記住Injectable用于創(chuàng)建服務(wù)蔬蕊，他創(chuàng)建的服務(wù)可以注入到任何的其他組件中结澄，所以當(dāng)我們想要使用數(shù)據(jù)模型的時(shí)候，我們直接注入進(jìn)去就可以了岸夯。
我們看一下實(shí)際的數(shù)據(jù)模型大概是什么樣子的麻献，然后再學(xué)習(xí)之。
> 修改 src/models/checklist-model.ts為以下

export class ChecklistModel {
    checklist: any;
    checklistObserver: any;
    constructor(public title: string, public items: any[]){
        this.items = items;
    }

    addItem(item): void {
        this.items.push({
            title: item,
            checked: false
        });
    }

    removeItem(item): void {
        let index = this.items.indexOf(item);
        if(index > -1){
            this.items.splice(index, 1);
        }
    }

    renameItem(item, title): void {
        let index = this.items.indexOf(item);
        if(index > -1){
            this.items[index].title = title;
        }
    }

    setTitle(title): void {
        this.title = title;
    }

    toggleItem(item): void {
        item.checked = !item.checked;
    }
}

我們這個(gè)數(shù)據(jù)模型所作的實(shí)際上是創(chuàng)建了一個(gè)單獨(dú)的檢查列表的藍(lán)圖猜扮。一個(gè)檢查列表有一個(gè)標(biāo)題和任意數(shù)量的需要完成的項(xiàng)勉吻。所以，我們?cè)O(shè)置了成員變量來持有這些值：title是一個(gè)簡單的字符串旅赢，items是一個(gè)數(shù)組齿桃。
注意，我們?cè)试S通過構(gòu)造器傳入標(biāo)題和項(xiàng)鲜漩。創(chuàng)建一個(gè)新的檢查列表的時(shí)候必須傳入標(biāo)題源譬，但是項(xiàng)的數(shù)組是可選的。如果你想立刻給檢查列表添加項(xiàng)的話孕似，我們可以在初始化的時(shí)候傳入踩娘，否則將會(huì)初始化一個(gè)空的數(shù)組。
我們也創(chuàng)建了大量的助理函數(shù)，看起來都挺直白的养渴，他們?cè)试S我們改變檢查列表的標(biāo)題雷绢，或者修改檢查列表的項(xiàng)目（修改名字，移除項(xiàng)理卑，給檢查列表添加新的項(xiàng)翘紊，設(shè)置項(xiàng)的完成狀態(tài)）。
同時(shí)主題我們有在每個(gè)函數(shù)后面加上：void藐唠。就像我們聲明變量的時(shí)候指定類型一樣：

checklist: any

我們也可以聲明函數(shù)的返回值類型帆疟。在本案例中挚瘟，沒有返回值吗跋，所有我們用的是void版扩。如果其中一個(gè)函數(shù)返回字符串的話走孽，那么我們就用：string代替。
設(shè)置完以上之后成黄，我們可以在任何導(dǎo)入了Checklist Model（下一課會(huì)講）的組件里簡單的通過以下代碼創(chuàng)建一個(gè)新的檢查列表：

let newChecklist = new ChecklistModel('My Checklist', []);

或者

let newChecklist = new ChecklistModel('My Checklist', myItemsArray);

我們現(xiàn)在將做些更好玩的凡恍，在數(shù)據(jù)模型中使用Observable盅抚，這樣我們就可以在檢查列表修改的時(shí)候被告知（此時(shí)我們可以觸發(fā)保存數(shù)據(jù)到內(nèi)存）润脸。

添加一個(gè)Observable

在本課程的基礎(chǔ)部分我們有了解一點(diǎn)Observable -- 我們使用Http服務(wù)返回的Observable來刷新一下你的記憶：

this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(data => {
    console.log(data);
});

我們調(diào)用了get方法柬脸，然后訂閱subscribe他返回的Observable。記住毙驯，Observable和Promise不一樣倒堕，他返回的是數(shù)據(jù)流，并且可以多次獲得數(shù)據(jù)爆价。這個(gè)理念無法通過Http服務(wù)來闡述涩馆，因?yàn)榇蟛糠智闆r下我們只需要獲取一次數(shù)據(jù)。在Http案例中Observable也已經(jīng)為我們建好了允坚。
我們也將在數(shù)據(jù)模型中從頭到尾的創(chuàng)建我們自己的Observable，這樣當(dāng)檢查列表發(fā)生改變的時(shí)候（因?yàn)槲覀冊(cè)诎l(fā)生改變的時(shí)候會(huì)發(fā)出一些數(shù)據(jù)）我們可以在應(yīng)用的其他部分可以監(jiān)聽到蛾号。在實(shí)施Observable的時(shí)候稠项，你可以看到如何從頭創(chuàng)建一個(gè)observable，你也可以看到一個(gè)Observable如何多次發(fā)出數(shù)據(jù)鲜结。
實(shí)施之前展运，我們更詳細(xì)的講一下Observable，也就是我們先要具體要做的內(nèi)容精刷。在以上的subscribe函數(shù)代碼中拗胜，我們只處理了一次response：

this.http.get(url).subscribe(data => {
    console.log(data);
});

這實(shí)際上就是Observable的 onNext 響應(yīng)。Observable同時(shí)也提供了兩個(gè)其他的響應(yīng)怒允，onError和onCompleted埂软，如果我們?cè)敢獾脑捒梢蕴幚砣浚?/p>

this.http.get(url).subscribe(
    (data) => {
        console.log(data);
    },
    (err) => {
        console.log(err);
    },
    () => {
        console.log("completed");
    }
);

以上代碼第一個(gè)事件處理器處理的是 onNext 想要，基本意思就是“當(dāng)我們偵測到從流里傳來下一點(diǎn)數(shù)據(jù)的時(shí)候纫事，那么就調(diào)用這里”勘畔。第二個(gè)處理器處理的是 onError 想要所灸，你可能猜到了他是當(dāng)有錯(cuò)誤發(fā)生的時(shí)候就會(huì)觸發(fā)。最后的處理器處理的是 onCompleted 事件炫七，他是當(dāng)Observable返回所有數(shù)據(jù)后觸發(fā)的爬立。
這里最有用的是 onNext了，如果我們創(chuàng)建自己的observable万哪，我們可以通過調(diào)用Observable的 next 提供一些數(shù)據(jù)多次觸發(fā) onNext 響應(yīng)侠驯。
現(xiàn)在，理論的道路清理完畢奕巍，我們看一下具體實(shí)現(xiàn)吟策。
> 修改 src/models/checklist-model.ts為如下

import {Observable} from 'rxjs/Observable';

export class ChecklistModel {
    checklist: any;
    checklistObserver: any;
    constructor(public title: string, public items: any[]){
        this.items = items;
        this.checklist = Observable.create(observer => {
            this.checklistObserver = observer;
        });
    }

    addItem(item): void {
        this.items.push({
            title: item,
            checked: false
        });
        this.checklistObserver.next(true);
    }

    removeItem(item): void {
        let index = this.items.indexOf(item);
        if(index > -1){
            this.items.splice(index, 1);
        }
        this.checklistObserver.next(true);
    }

    renameItem(item, title): void {
        let index = this.items.indexOf(item);
        if(index > -1){
            this.items[index].title = title;
        }
        this.checklistObserver.next(true);
    }

    setTitle(title): void {
        this.title = title;
        this.checklistObserver.next(true);
    }

    toggleItem(item): void {
        item.checked = !item.checked;
        this.checklistObserver.next(true);
    }
}

此處第一件要關(guān)心的事情是我們從RxJS庫里導(dǎo)入了Observable。然后在構(gòu)造器中伍绳，我們?cè)O(shè)置了Observable：

this.checklist = Observable.create(observer => {
    this.checklistObserver = observer;
});

代碼里面的this.checklist成員變量是我們自己的observable踊挠。由于他是一個(gè)observable，我們可以對(duì)他進(jìn)行訂閱冲杀，由于他是我們數(shù)據(jù)模型的一部分效床，我們可以在任何檢查列表上訂閱他。例如：

let newChecklist = new ChecklistModel('My Checklist', []);

newChecklist.checklist.subscribe(data => {
    console.log(data);
});

當(dāng)然权谁，我們還沒有用Observable來做什么剩檀，所以他永遠(yuǎn)都不會(huì)觸發(fā)onNext響應(yīng)。這就是為什么我們?cè)诿總€(gè)助理函數(shù)里面添加如下代碼片的原因：

this.checklistObserver.next(true);

這樣旺芽，無論何時(shí)我們通過助理函數(shù)來更改標(biāo)題沪猴，或者添加一個(gè)新的項(xiàng)，或者其他任何事情的時(shí)候采章，他都會(huì)通知所有訂閱了他的Observable的任何事物运嗜。我們只要知道發(fā)生了改變所以我們只要傳入一個(gè)boolean（true或者false），但是如果我們想要的話我們也可以傳入一些數(shù)據(jù)悯舟。
這樣的結(jié)果就是現(xiàn)在我們可以“觀察observe”我們創(chuàng)建的檢查列表的變動(dòng)担租。稍后我們將用到這些變更監(jiān)聽然后觸發(fā)保存操作。

總結(jié)

本課程中我們稍微超出了入門者級(jí)別抵怎，創(chuàng)建了強(qiáng)壯的（robust奋救，據(jù)說有人翻譯為魯棒性）數(shù)據(jù)模型。如我之前講到反惕，他當(dāng)然有他的好處尝艘，但是如果學(xué)習(xí)本課程遇到麻煩的時(shí)候也不要被嚇到 -- 作為初學(xué)者的你可以直接在類上定義數(shù)據(jù)，不要操心數(shù)據(jù)模型和observable姿染。
我真心不想用Observable嚇壞你 -- 他們很容易混淆（直到你腦子里面適應(yīng)他們）背亥，在除了Http服務(wù)訂閱響應(yīng)之外，在大部分的應(yīng)用中你真心不需要用到它們。但是隘梨，一旦你理解了他們程癌，你就可以用他們來做更強(qiáng)大的東西。
盡管本課程稍微高級(jí)一點(diǎn)轴猎，他還是很好的向你展示了如何在項(xiàng)目中使用Observable嵌莉，如果想跟上課程進(jìn)度，希望接下來的內(nèi)容不會(huì)煩到你捻脖。