JAVASCRIPT網頁應用程式設計

Spine 函式庫

|

193

<div id="contacts">

<div class="show">

<ul class="options">

<li class="optEdit">Edit contact</li>

<li class="optEmail">Email contact</li>

</ul>

<div class="content"></div>

</div>

<div class="edit">

<ul class="options">

<li class="optSave default">Save contact</li>

<li class="optDestroy">Delete contact</li>

</ul>

<div class="content"></div>

</div>

</div>

目前我們有

#sidebar

和

#contacts

兩大區塊。程式會將聯絡人姓名清單裝進

.items

裡

面、將聯絡人詳細資料（目前在

.items

裡處於被選取的聯絡人）放進

#contacts

裡面、

監聽

.optEmail

和

.optSave

的

click

事件（視情況輪替將操作介面切換為「顯示」或「編

輯」模式）、監聽

.optDestroy

（負責刪除目前選到的聯絡人，並改選取其他聯絡人）的

click

事件。

Contact 模型

Contact

模型的程式內容非常簡單，只需要六行左右的程式碼就可以搞定。它有三組屬

性：

first_name

（名）、

last_name

（姓），以及

email ...