列表操作
list_format.png
列表的常用形式有图片形式与信息形式的，常见的有如下的操作：
- 显示列表
- 选择列表项
- 新增列表项
- 删除列表项
- 更新列表项
范例代码
数据结构
list_data_structure.png
[
{
"id": 22341234,
"name": "Good Song",
"album": {
"id": 213512,
"name": "Good Album"
},
"artist":{
"id": 1234512,
"name": "Evil Artist"
}
}
]
显示列表
列表容器
list_container.png
列表模板 分离数据和视图
list_template.png
绘制列表
准备数据并整合模板与数据
list_render.png
通过 AJAX 获取数据
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
更新状态
list_update_state.png
编程方式
面向视图 的操作方式，即为针对视图的直接编程（对 DOM 树进行直接的操作）。
list_view_oriented.png
list_view_oriented_1.png
这样的方式代理了许多的弊端，例如无法进行完全的自动化测试以及极高的视图层和控制层耦合的紧密性。
面向数据 的操作方式，视图则被抽象为若干的数据以及状态（后续所有的操作都会更加数据模型而操作），从而做到视图模型层完全自动化的测试。
list_viewmodel_1.png
list_viewmodel_2.png
list_viewmodel_3.png
list_viewmodel_4.png
list_viewmodel_5.png
