При создании контейнера в массиве, контейнер получает индекс, начиная с 0 - (для первого контейнера) затем при добавлении новых контейнеров, если новый контейнер добавить в начало массива на позицию 0 - индекс всех идущих за ним контейнеров увеличится на 1, при удалении контейнера из массива, наоборот индекс всех идущих за удаленным контейнером уменьшится на 1. Давайте создадим в каждом контейнере свойство которое будет отображать индекс контейнера в html разметке и назовем это свойство page_index. Затем при добавлении или удалении контейнеров, будем обновлять данное свойство, чтобы в нем отображались актуальные данные. Сделать это можно разными способами. Например после каждого добавления или удаления проходить массив в цикле forEach и обновлять индекс всех контейнеров. Второй способ это прикрепить контейнеру слушатель события listener_create_page и при его наступлении обновлять свойство page_index, в данном примере мы так и сделаем.
Добавим в html код контейнеров page из примера выше (#Добавление контейнеров в массив) свойство - событие listener_create_page с названием события "emiter-create-page" и свойство page_index с типом "text":
<form data-create_page="container" style="border: 1px solid blue; padding: 10px; margin: 10px;> <!-- ...без изменений... --> </form>
<div data-pages="array" style="border: 1px solid red; padding: 10px;">
<div data-page="container" data-page-listener_create_page="emiter-create-page" style="border: 1px solid green">
<!-- добавили свойство - слушателя события "emiter-create-page" -->
<p data-page-paragraf="text" data-page-my_class="class">текст<p>
<p>index= <span data-page-page_index="text" > 0</span> </p>
<!-- добавили свойство page_index для отображения меняющихся данных -->
<button data-page-btn_click="click">Кнопка</button>
<button data-page-remove="click">Удалить</button>
</div>
<!-- аналогично и для второго контейнера -->
<div data-page="container" data-page-listener_create_page="emiter-create-page" style="border: 1px solid green">
<p data-page-paragraf="text" data-page-my_class="class">текст<p>
<p>index= <span data-page-page_index="text" > 1</span> </p>
<button data-page-btn_click="click">Кнопка</button>
<button data-page-remove="click">Удалить</button>
</div>
</div>
Теперь изменим описание приложения:
var StateMap = {
create_page: {
container: "create_page",
props: ["text", "create"],
methods: {
create: function(){
event.preventDefault();
var text = this.parent.props.text.getProp();
this.rootLink.state["pages"].add({paragraf: text}, 0); //добавляем контейнер в начало массива, соответственно индекс всех остальных увеличивается на 1
this.rootLink.eventProps["emiter-create-page"].emit();
//вызвали пользовательское событие "emiter-create-page" при создании контейнера
}
}
},
pages: {
container: "page",
//добавили свойства "page_index" и "listener_create_page"
props: ["paragraf", "my_class", "btn_click", "remove", "page_index", "listener_create_page"],
methods: {
btn_click: function(){
console.log(this);
this.parent.props.paragraf.setProp("Новый текст");
this.parent.props.my_class.setProp("new_class");
},
remove: function(){
this.parent.remove(); //удалили контейнер соответственно индекс контейнеров идущих после него уменьшился на 1
this.rootLink.eventProps["emiter-create-page"].emit();
//вызвали пользовательское событие "emiter-create-page" при удалении контейнера
},
// добавили обработчик события "emiter-create-page" для свойства listener_create_page всех контейнеров
listener_create_page: function(){
this.parent.props.page_index.setProp( this.parent.index );
//обновили интерфейс всех контейнеров на основе меняющегося index
}
}
},
eventEmiters: { //создали объект со всеми пользовательскими событиями приложения
["emiter-create-page"]: { //наше событие с начальными данными
prop: "",
}
}
}
Итак после каждого создания либо удаления контейнера page мы вызываем событие "emiter-create-page" и все подписчики обновляют свои данные.
Теперь если создать новый контейнер он получит index равный 2, а затем удалить нулевой контейнер с index 0 то созданный нами контейнер изменит index с 2 на 1 и мы с помощью пользовательского события обновим его интерфейс.
Также можно передавать новые данные в пользовательское событие, которые затем получат все слушатели в обработчиках событий this.emiter.prop
Более подробно о работе с пользовательскими событиями можно почитать в разделе уроки - Работа с пользовательскими событиями