**陣列元素的新增//移除事件**```!
**掌握observableArray()陣列元素增減，
即時反應在UI的能力。但如果我們希望在--
--陣列增加或移除元素時加上自訂邏輯，
要怎麼做 ?!*
foreach提供了afterAdd及beforeRemove兩個額外的事件繫結設定，允許
在陣列新增、移除元素時執行特定邏輯。
在此繼續沿用先前的使用者清單呈現範例，
加上兩個效果:
- 新增資料時，將最新加入的資料標為暗紅字
- 刪除資料時，加上資料淡出後消失的特效
**
排版顯示純文字
//第一次foreach產生時不會觸發，只有事後加入才會
self.afterAddEvent = function (elems, idx, data) {
//Template中的Text Node與Element Node會分別觸發多次
//在本例中會因Text, Element, Text共觸發三次
//透過nodeType過濾，只處理Element Node
if (elems.nodeType == 1) //Element Node
{
$(".new").removeClass("new");
$(elems).addClass("new");
}
};
//注意: 掛載beforeRemove事件後，要自已負責移除被刪除元素
self.b4RemoveEvent = function (elems, idx, data) {
if (elems.nodeType == 1) {
$(elems)
.css("background-color", "red")
.animate({ opacity: 0.2 }, 500, function () {
$(this).remove();
})
}
}; **
** afterAdd及beforeRemove函數會固定收到三個參數，elems、
index及data，其中elems為範本容器中的各元素，
在本範例中，就是以下黃底紅字部分:
** <<tbody data-bind="foreach: { data: users,afterAdd: afterAddEvent, beforeRemove: b4RemoveEvent }"> ** <tr> <td><span data-bind="text: id"></span></td> <td><span data-bind="text: name"></span></td> <td><span data-bind="text: score" style='text-align:right'></span></td> <td><a href='#' data-bind="click: $root.removeUser">移除</a></td> </tr> </tbody>
但此處有個小訣竅，實際運作時afterAdd/beforeRemove會收到不同的elems被
呼叫三次，原因是除了<tr>之外，<tbody>到<tr>之間的空白、</tr>到</tbody>間
的空白也各算一個Element，其nodeType為3，代表TEXT_NODE。因此三次傳入
的elems分別為TEXT_NODE、ELEMENT_NODE、TEXT_NODE，而第二次傳入
的ELEMENT_NODE是<tr>…</tr>間的內容，才是我們需要處理的對象，
故加入if (elems.nodeType == 1)的判斷式。
最新加入資料的特別標示，在此透過addClass("new")來達成；
至於移除資料的特效，則先為<tr>加上不透明度(opacity)由100%降到20%的動畫，
然後在動畫完成後，將其自<tbody>中移除。要注意，一旦掛載了beforeRemove，
就不再自動幫你移除該筆資料在網頁對應的元素，必須自行處理，
但這也提供開發人員絕對的控制權，可自由安排HTML元素要怎麼從網頁上退場。
**
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
沒有留言:
張貼留言
if you like make fds, wellcome you here~~anytime***
my free place for everyones who want the good software,
come & download them~ wellcome!!