列表操作
list_format.png
列表的常用形式有圖片形式與信息形式的，常見的有如下的操作：
- 顯示列表
- 選擇列表項
- 新增列表項
- 刪除列表項
- 更新列表項
范例代碼
數(shù)據(jù)結(jié)構(gòu)
list_data_structure.png
[
{
"id": 22341234,
"name": "Good Song",
"album": {
"id": 213512,
"name": "Good Album"
},
"artist":{
"id": 1234512,
"name": "Evil Artist"
}
}
]
顯示列表
列表容器
list_container.png
列表模板 分離數(shù)據(jù)和視圖
list_template.png
繪制列表
準(zhǔn)備數(shù)據(jù)并整合模板與數(shù)據(jù)
list_render.png
通過 AJAX 獲取數(shù)據(jù)
list_ajax_get_data.png
列表單選操作
list_single_selection.png
列表多選操作（Control 與 Shift 操作）
parent.addEventListener(
'mouseup', function(event) {
var target = getTarget(event),
selected = isSelected(target);
// right click
if (event.button == 2&&selected) {
return;
}
// with control click
if (event.ctrlKey) {
!selected?appendToSelection(target):removeFromSelection(target);
}
// with shift key
if (event.shiftKey) {
var list = Array.prototype.slice.call(
parent.getElementsByTagName('li'), 0
);
if (!last) {
last = getLastElection() || target;
}
selectWithRangeFromTo(list, last, target);
} else {
last = null;
}
}
);
右鍵菜單
contextmenu 事件為右鍵菜單彈出事件。
list_right_click.png
list_right_click_details.png
增加列表
list_add_item.png
list_add_item_using_template.png
刪除列表
list_item_remove.png
更新列表
list_update.png
更新狀態(tài)
list_update_state.png
編程方式
面向視圖 的操作方式，即為針對視圖的直接編程（對 DOM 樹進行直接的操作）。
list_view_oriented.png
list_view_oriented_1.png
這樣的方式代理了許多的弊端，例如無法進行完全的自動化測試以及極高的視圖層和控制層耦合的緊密性峻仇。
面向數(shù)據(jù) 的操作方式，視圖則被抽象為若干的數(shù)據(jù)以及狀態(tài)（后續(xù)所有的操作都會更加數(shù)據(jù)模型而操作）邑商，從而做到視圖模型層完全自動化的測試摄咆。
list_viewmodel_1.png
list_viewmodel_2.png
list_viewmodel_3.png
list_viewmodel_4.png
list_viewmodel_5.png
