目前為止我們做了很多的設(shè)置和架構(gòu)工作，但是本課中我們開(kāi)始制作骨架部分。我們將加入創(chuàng)建checklist，查看checklist以及給他們添加項(xiàng)（同時(shí)也提供編輯項(xiàng)和列表的操作）的途徑缤沦。這將是一個(gè)大動(dòng)作，建議你先準(zhǔn)備點(diǎn)咖啡易稠。

checklist

第一件要做的事情是添加創(chuàng)建和展示checklist所需的所有東西缸废。意思是添加到類定義，修改之前創(chuàng)建的模板來(lái)展示真實(shí)的清單數(shù)據(jù)驶社。
先從設(shè)置類定義開(kāi)始企量。
> 修改 src/pages/home/home.ts為如下：

import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';
import { ChecklistPage } from '../checklist/checklist';
import { ChecklistModel } from '../../models/checklist-model';
import { Data } from '../../providers/data';
import { Keyboard } from 'ionic-native';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    checklists: ChecklistModel[] = [];
    constructor(public nav: NavController, public dataService: Data, public  alertCtrl: AlertController, public platform: Platform) {
    }

    ionViewDidLoad() {
    }

    addChecklist(): void {
    }

    renameChecklist(checklist): void {
    }

    viewChecklist(checklist): void {
    }

    removeChecklist(checklist): void{
    }

    save(): void{
    }
}

在這里我們從Ionic庫(kù)里面導(dǎo)入了不少東西。NavController你可以已經(jīng)很熟悉了亡电，但是AlertController可能就不那么熟悉了届巩。AlertController允許我們向用戶展示各種警告框，包括基本的提示框份乒，帶輸入的提示框恕汇，確認(rèn)框等等。我們以他作為添加新checklist的途徑冒嫡。
同時(shí)我們也導(dǎo)入了我們的ChecklistPage，我們稍后會(huì)實(shí)現(xiàn)他四苇，最重要的是我們導(dǎo)入了上節(jié)課制作的Checklist Model孝凌。
我們也導(dǎo)入了之前生成的Data提供者，但是他的具體功能后續(xù)才會(huì)實(shí)現(xiàn)月腋。最后蟀架，我們從Ionic Native導(dǎo)入了‘Keyboard’，這樣我們可以用他來(lái)確保稍后用戶添加了checklist之后能夠關(guān)閉軟鍵盤榆骚。
在構(gòu)造器中通過(guò)給NavController和Data添加public修飾符片拍，我們就可以在類里通過(guò)this.nav和this.dataService來(lái)訪問(wèn)他們了〖酥基本上他是以下內(nèi)容的簡(jiǎn)短寫法：

constructor(nav: NavController, dataService: Data){
    this.nav = nav;
    this.dataService = dataService;
}

之前你應(yīng)該看到過(guò)捌省。
我們也聲明了一個(gè)checklists數(shù)組，類定義里面可以通過(guò)this.checklists來(lái)訪問(wèn)他碉钠。類定義里面的大量的函數(shù)將在后續(xù)一個(gè)一個(gè)的講解纲缓。

addChecklist

這個(gè)方法提供給用戶創(chuàng)建一個(gè)新的checklist。他會(huì)啟動(dòng)一個(gè)提示框喊废，然后使用其中輸入的信息來(lái)創(chuàng)建一個(gè)新的checklist（會(huì)用到我們之前創(chuàng)建的數(shù)據(jù)模型）祝高。
> 修改 addChecklist 函數(shù)如下：

addChecklist(): void {
    let prompt = this.alertCtrl.create({
        title: 'New Checklist',
        message: 'Enter the name of your new checklist below:',
        inputs: [
            {
                name: 'name'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: data => {
                    let newChecklist = new ChecklistModel(data.name, []);
                    this.checklists.push(newChecklist);

                    newChecklist.checklist.subscribe(update => {
                        this.save();
                    });

                    this.save();
                }
            }
        ]
    });

    prompt.present();
}

我們給用戶展示了一個(gè)提示框，提示框包含了一個(gè)輸入域污筷，兩個(gè)按鈕Cancel和Save工闺。取消按鈕除了關(guān)閉提示框之外，不做其他事情，但是保存按鈕我們給他添加了一個(gè)處理器用于傳遞輸入的數(shù)據(jù)陆蟆。
在處理器里面雷厂，我們先通過(guò)傳入輸入的名字到一個(gè)checklist model里生成了一個(gè)新的checklist，然后將他push到咱們的this.checklists數(shù)組遍搞。然后我們訂閱了我們給數(shù)據(jù)模型添加的observable來(lái)監(jiān)聽(tīng)checklist的修改罗侯，然后其中會(huì)觸發(fā)save函數(shù)。注意溪猿，我們這里調(diào)用了兩次save钩杰，一個(gè)是observable觸發(fā)的，另一個(gè)是直接觸發(fā)的（因?yàn)槲覀兲砑恿艘粋€(gè)新的checklist）诊县。
最后讲弄，我們通過(guò)present方法呈現(xiàn)了這個(gè)提示框。
如果你再次看模板文件的時(shí)候依痊，會(huì)發(fā)現(xiàn)我們?cè)赼dd按鈕點(diǎn)擊的時(shí)候已經(jīng)調(diào)用了這個(gè)函數(shù)避除。

<button (click)="addChecklist()"><ion-icon name="add-circle"></ion-icon></button>

renameChecklist

接下來(lái)我們來(lái)定義renameChecklist函數(shù)，看名字就知道是給checklist重命名的胸嘁。
> 修改 renameChecklist 函數(shù)如下：

renameChecklist(checklist): void {
    let prompt = this.alertCtrl.create({
        title: 'Rename Checklist',
        message: 'Enter the new name of this checklist below:',
        inputs: [
            {
                name: 'name'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: data => {
                    let index = this.checklists.indexOf(checklist);
                    if(index > -1){
                        this.checklists[index].setTitle(data.name);
                        this.save();
                    }
                }
            }
        ]
    });

    prompt.present();
}

第一眼看起來(lái)和addChecklist函數(shù)很想瓶摆，因?yàn)樗緛?lái)就很像哇。用了同樣的提示框性宏，同樣的輸入框群井，童顏的按鈕，只是處理器稍有區(qū)別而已毫胜。
注意书斜，這個(gè)函數(shù)有參數(shù)傳入，也就是我們將要改名的checklist的引用酵使。我們稍后修改模板來(lái)傳入此參數(shù)荐吉，但是此刻我們假裝他已經(jīng)傳入進(jìn)來(lái)就可以了。
我們使用此checklist的引用在this.checklists中查找然后將他設(shè)置為新的標(biāo)題口渔，然后觸發(fā)save样屠。
你可能會(huì)記得我們已經(jīng)在模板中設(shè)置了一個(gè)點(diǎn)擊處理器來(lái)調(diào)用這個(gè)函數(shù)：

<button light (click)="renameChecklist(checklist)"><ion-icon name="clipboard"></ion-icon></button>

removeChecklist

接下來(lái)我們來(lái)加入刪除checklist的能力。
> 修改 removeChecklist 函數(shù)如下：

removeChecklist(checklist): void{

    let index = this.checklists.indexOf(checklist);

    if(index > -1){
        this.checklists.splice(index, 1);
        this.save();
    }

}

這個(gè)函數(shù)簡(jiǎn)單多了缺脉，因?yàn)樗麤](méi)有用戶輸入需求瞧哟，我們只需要處理掉這個(gè)checklist就可以了。跟之前做的一樣枪向，我們傳入了一個(gè)checklist引用然后在this.checklists找到他勤揩。之后通過(guò)數(shù)組的splice方法簡(jiǎn)單的將他移除掉然后觸發(fā)save就完成了。
以下是模板中觸發(fā)此函數(shù)的相關(guān)代碼：

<button danger (click)="removeChecklist(checklist)"><ion-icon name="trash"></ion-icon> Delete</button>

viewChecklist

我們現(xiàn)在可以創(chuàng)建和修改咱們的checklist了秘蛔，但是我們也得可以看checklist的詳情不是陨亡。我們將要通過(guò)咱們的NavController來(lái)push壓入一個(gè)新頁(yè)面然后傳入我們選擇的checklist傍衡。
> 修改 viewChecklist 函數(shù)為如下：

viewChecklist(checklist): void {
    this.nav.push(ChecklistPage, {
        checklist: checklist
    });
}

我們將之前導(dǎo)入的ChecklistPage（還沒(méi)完成）傳入到 push 方法，以及想要傳遞給頁(yè)面的其他參數(shù)负蠕，也就是我們要顯示詳情的checklist蛙埂。在頁(yè)面中，我們就可以通過(guò)NavParams來(lái)獲取這些數(shù)據(jù)了遮糖。

save

這可能是現(xiàn)在來(lái)講最奇怪的一個(gè)方法了绣的，我們實(shí)際現(xiàn)在不會(huì)去實(shí)現(xiàn)。后續(xù)的保存和加載數(shù)據(jù)才是他的本命課程欲账，我們那個(gè)時(shí)候才會(huì)再來(lái)看他屡江。

為了把所有事情聯(lián)合起來(lái)，我們需要完善home頁(yè)面的模板赛不。我們現(xiàn)在可以用自己的數(shù)據(jù)了惩嘉，但是我們還是什么都看不到。
> 修改 src/pages/home/home.html 為如下：

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            <img src = "assets/images/logo.png" />
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="addChecklist()"><ion-icon  name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list no-lines>
        <ion-item-sliding *ngFor="let checklist of checklists">
        <button ion-item (click)="viewChecklist(checklist)">
            {{checklist.title}}
            <span>{{checklist.items.length}} items</span>
        </button>
        <ion-item-options>
            <button ion-button icon-only color="light" (click)="renameChecklist(checklist)"><ion-icon
            name="clipboard"></ion-icon></button>
            <button ion-button icon-only color="danger" (click)="removeChecklist(checklist)"><ion-icon
            name="trash"></ion-icon></button>
        </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

這里我們做了很多有趣的事情踢故，但是最需要注意的是 ngFor 循環(huán)：

<ion-item-sliding *ngFor="let checklist of checklists">

這個(gè)循環(huán)的作用是循環(huán)我們的this.checklist數(shù)組并為他們?cè)诹斜碇袆?chuàng)建一個(gè)滑動(dòng)項(xiàng)文黎。記住，在ngFor前面使用的 * 語(yǔ)法是Angular 2中用于創(chuàng)建內(nèi)置模板的快捷方式殿较，所以我們實(shí)際上是為數(shù)組中的每個(gè)元素創(chuàng)建一個(gè)模板耸峭。每次新建模板的時(shí)候他都會(huì)包含指定項(xiàng)的信息，這樣在 ngFor 里面的任意處我們都可以獲取指定checklist的數(shù)據(jù)用作渲染淋纲，如下：

{{checklist.title}}

同時(shí)也請(qǐng)注意 ngFor 循環(huán)的 checklist 變量前面都有 let 修飾符劳闹。在Angular 2中使用let修飾符讓我們可以創(chuàng)建一個(gè)局部變量，這樣我們可以將這個(gè)局部變量的引用傳入到之前創(chuàng)建的函數(shù)中帚戳。為了便于理解玷或，如果我們用以下方法替換的話：

<ion-item-sliding *ngFor="let check of checklists">

我們就可以這樣去渲染數(shù)據(jù)：

{{check.title}}

可以這樣穿個(gè)函數(shù)：

removeChecklist(check)

這樣我們算是完成了home頁(yè)面了儡首，現(xiàn)在你可以去添加片任，編輯和刪除checklist了，也可以顯示指定checklist（現(xiàn)在沒(méi)有任何實(shí)際內(nèi)容蔬胯，所以算是用不了）的詳情頁(yè)了对供。
此時(shí)當(dāng)你運(yùn)行ionic serve的時(shí)候，你應(yīng)該可以看到這樣的畫面：

預(yù)覽

重點(diǎn)注意如果想要?jiǎng)?chuàng)建一個(gè)新的項(xiàng)然后展示他的詳情頁(yè)的話氛濒，必須從checklist.html移除此行：

<ion-checkbox [checked]="item.checked" (click)="toggleItem(item)"></ion-checkbox>

后續(xù)課程里面我們只會(huì)在有項(xiàng)數(shù)據(jù)的時(shí)候才加入他产场，但是目前為止，由于沒(méi)有數(shù)據(jù)所以在嘗試訪問(wèn)數(shù)據(jù)的時(shí)候會(huì)報(bào)錯(cuò)舞竿。
所有這些后面都會(huì)講到京景，如果你現(xiàn)在想正常預(yù)覽應(yīng)用的話得先做這些額外的步驟。

Checklist 項(xiàng)

現(xiàn)在我們可以觸發(fā)checklist詳情頁(yè)了骗奖，我們最好加入點(diǎn)內(nèi)容确徙，給用戶提供創(chuàng)建和修改單個(gè)checklist數(shù)據(jù)項(xiàng)的途徑醒串。這個(gè)部分中，我們將實(shí)現(xiàn)自己的Checklist Page鄙皇，它將通過(guò)home頁(yè)面啟動(dòng)芜赌，會(huì)提供一些相關(guān)數(shù)據(jù)給他用于展示checklist。
我們從設(shè)置類定義開(kāi)始伴逸。
> 修改 src/pages/checklist/checklist.ts 為如下：

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';

@Component({
    selector: 'page-checklist',
    templateUrl: 'checklist.html'
})

export class ChecklistPage {
    checklist: any;
    constructor(public nav: NavController, public navParams: NavParams, public
    alertCtrl: AlertController){
        this.checklist = this.navParams.get('checklist');
    }

    addItem(): void {
    }

    toggleItem(item): void {
    }

    removeItem(item): void {
    }

    renameItem(item): void {
    }

    uncheckItems(): void {
    }

}

這里需要學(xué)習(xí)的點(diǎn)不多缠沈，唯一需要注意的是NavParams的使用。當(dāng)我們傳遞數(shù)據(jù)到另一個(gè)頁(yè)面的時(shí)候错蝴，我們可以通過(guò)注入NavParams然后通過(guò)他的get方法來(lái)獲取洲愤。在本例中，我們只是傳入了想要查看的checklist漱竖，如果你想要的話可以傳入很多其他你需要的值禽篱。
跟之前一樣，我們將一個(gè)一個(gè)的去實(shí)現(xiàn)每個(gè)方法馍惹。很多跟之前home頁(yè)面方法相同躺率。

addItem

> 修改 addItem 函數(shù)為如下：

addItem(): void {
    let prompt = this.alertCtrl.create({
        title: 'Add Item',
        message: 'Enter the name of the task for this checklist below:',
        inputs: [
            {
                name: 'name'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: data => {
                    this.checklist.addItem(data.name);
                }
            }
        ]
    });

    prompt.present();
}

這些看起來(lái)應(yīng)該很熟悉，但是注意處理器的不同万矾。由于我們?cè)跀?shù)據(jù)模型中創(chuàng)建了一個(gè)addItem助理函數(shù)悼吱，我們只需要調(diào)用這個(gè)函數(shù)傳入我們需要?jiǎng)?chuàng)建的項(xiàng)的名即可（告訴過(guò)你數(shù)據(jù)模型會(huì)帶來(lái)很大的便利！）良狈。

renameItem

> 修改 renameItem 函數(shù)為如下：

renameItem(item): void {
    let prompt = this.alertCtrl.create({
        title: 'Rename Item',
        message: 'Enter the new name of the task for this checklist below:',
        inputs: [
            {
                name: 'name'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: data => {
                    this.checklist.renameItem(item, data.name);
                }
            }
        ]
    });

    prompt.present();
}

基本上相同除了在處理器中調(diào)用了數(shù)據(jù)模型的renameItem方法后添，同時(shí)傳入了需要改名的項(xiàng)的引用。

removeItem

> 修改 removeItem 函數(shù)為如下：

removeItem(item): void {
    this.checklist.removeItem(item);
}

這個(gè)更簡(jiǎn)單薪丁，我們簡(jiǎn)單的調(diào)用了數(shù)據(jù)模型的removeItem助理函數(shù)然后傳入了我們需要?jiǎng)h掉的項(xiàng)遇西。

toggleItem

> 修改 toggleItem 函數(shù)為如下：

toggleItem(item): void {
    this.checklist.toggleItem(item);
}

這個(gè)函數(shù)用于切換單獨(dú)項(xiàng)的標(biāo)記為開(kāi)或者關(guān)，我們也只是簡(jiǎn)單的傳入項(xiàng)的引用給數(shù)據(jù)模型严嗜。

uncheckItems

> 修改 uncheckItems 函數(shù)為如下：

uncheckItems(): void {
    this.checklist.items.forEach((item) => {
        if(item.checked){
            this.checklist.toggleItem(item);
        }
    });
}

這個(gè)函數(shù)是綁定到模板里的reset按鈕的粱檀，他將循環(huán)checklist里面的每個(gè)項(xiàng)，如果當(dāng)前項(xiàng)是開(kāi)的狀態(tài)的話漫玄，調(diào)用數(shù)據(jù)模型的toggleItem方法關(guān)掉他茄蚯。這個(gè)方法讓用戶可以一次關(guān)掉所有項(xiàng)。
現(xiàn)在睦优，我們只剩下checklist頁(yè)需要處理了渗常。我們之前已經(jīng)設(shè)置好了這個(gè)模板的整體結(jié)構(gòu)，但是為了顯示真實(shí)數(shù)據(jù)汗盘，我們也需要對(duì)他進(jìn)行home頁(yè)類似的調(diào)整皱碘。
> 修改 src/pages/checklist/checklist.html 如下：

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
        {{checklist.title}}
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="uncheckItems()"><ion-icon    name="refresh-circle"></ion-icon></button>
            <button ion-button icon-only (click)="addItem()"><ion-icon    name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-list no-lines>
        <ion-item-sliding *ngFor="let item of checklist.items">
            <ion-item>
                <ion-label>{{item.title}}</ion-label>
                <ion-checkbox [checked]="item.checked" (click)="toggleItem(item)">
                </ion-checkbox>
            </ion-item>
        <ion-item-options>
        <button ion-button icon-only color="light" (click)="renameItem(item)"><ion-icon name="clipboard"></ion-icon></button>
        <button ion-button icon-only color="danger" (click)="removeItem(item)"><ion-icon name="trash"></ion-icon></button>
        </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

看起來(lái)跟home頁(yè)面很像，但是有些許不同隐孽。我們用類定義中的checklist數(shù)據(jù)在navbar中顯示當(dāng)前checklist的標(biāo)題癌椿。我們?cè)俅问褂?ngFor 來(lái)循環(huán)數(shù)據(jù)家凯，但是這次我們只是循環(huán)的數(shù)據(jù)項(xiàng)，也就是checklist的子項(xiàng)如失。同時(shí)注意我們使用了雙花括號(hào)來(lái)渲染數(shù)據(jù)：

{{item.title}}

我們也可以通過(guò)方括號(hào)來(lái)設(shè)置元素屬性：

[checked]="item.checked"

他將會(huì)把checked的值得設(shè)置為item.checked的值绊诲。

總結(jié)

現(xiàn)在你基本可以執(zhí)行應(yīng)用里的每個(gè)函數(shù)來(lái)，包括創(chuàng)建checklist褪贵，修改掂之，查看單獨(dú)的checklist，以及給他們添加單獨(dú)的數(shù)據(jù)項(xiàng)脆丁。
試試看在瀏覽器中運(yùn)行你的應(yīng)用世舰，添加你自己的checklist和數(shù)據(jù)項(xiàng)。
下一節(jié)課中槽卫，我們將實(shí)現(xiàn)保存數(shù)據(jù)然后看看怎么樣美化這個(gè)原因（先屋子再門面跟压，對(duì)吧？）歼培。