Привязка foreach позволяет использовать ряд функций обратного вызова, которые вызываются при возникновении тех или иных событий:
afterRender: вызывается, когда сработала самая первая инициализация привязки foreach, и также срабатывает при добавлении нового элемента в массив
afterAdd: срабатывает каждый раз при добавлении нового элемента в массив
beforeRemove: срабатывает перед удалением элемента из массива. Как правило, используется для анимации удаления
beforeMove: вызывается до перемещения элемента внутри массива
afterMove: вызывается после перемещения элемента внутри массива
Как правило, функции обратного вызова служат для анимации элементов. Все они принимают три параметра:
Изменяемый элемент структуры DOM на веб-странице, который был добавлен (afterAdd), удален (beforeRemove) или перемещен (beforeMove / afterMove)
Индекс изменяемого элемента в массиве
Изменяемый элемент самого массива, который был добавлен (afterAdd), удален (beforeRemove) или перемещен (beforeMove / afterMove)
Пример анимации добавляемого элемента с помощью методов обратного вызова:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка массивов в KnockoutJS</title>
</head>
<body>
<ul data-bind="foreach: { data: phones, afterAdd: displayItem }">
<li>
<p data-bind="text: name"></p>
<p data-bind="text: company"></p>
</li>
</ul>
<button id="addItemBtn">Добавить</button>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
<script>
function Phone(name, company){
this.name = name;
this.company = company;
};
var viewModel ={
phones: ko.observableArray([
new Phone("iPhone 6S", "Apple"),
new Phone("Lumia 950", "Microsoft"),
new Phone("Nexus 6P","Huawei")
]),
displayItem: function(element, index, data) {
$(element).filter("li").css("opacity", 0.1);
$(element).filter("li").fadeTo(2000, 1.0);
}
};
ko.applyBindings(viewModel);
var addItemBtn = document.getElementById("addItemBtn");
addItemBtn.addEventListener("click", function (e) {
viewModel.phones.push(new Phone("Samsung", "Galaxy S7 Edge"));
});
</script>
</body>
</html>
Для анимации вначале подключается библиотека jquery. Сама анимация определена в функции displayItem:
displayItem: function(element, index, data) {
$(element).filter("li").css("opacity", 0.1);
$(element).filter("li").fadeTo(2000, 1.0);
}
То есть сначала устанавливает почти полная прозрачность, а затем она уменьшается в течение 2000 миллисекунд.
Сама же привязка принимает следующую форму:
data-bind="foreach: { data: phones, afterAdd: displayItem }"