Добавление контейнеров в массив

Далее рассмотрим динамическое создание новых контейнеров page в массиве pages. Для этого создадим новый компонент - форму create_page, в которой будем создавать новые контейнеры:

  <!-- создали новый компонент create_page -->
<form data-create_page="container" style="border: 1px solid blue; padding: 10px; margin: 10px;">  

    <div class="form-group">
        <label for="container_text">текст записи</label>

            <textarea data-create_page-text="inputvalue"  name="container_text" id="container_text" rows="1"></textarea> 
             <!-- свойство text с типом данных "inputvalue"  -->

        </div>

        <button data-create_page-create="click">Создать</button> 
         <!-- свойство create с типом данных "click"  -->

</form>

<div data-pages="array" style="border: 1px solid red; padding: 10px;">
     <!-- массив pages без изменений (см. пример выше ##Создание массива) -->
</div>

Теперь создадим новый компонент - create_page в описании приложения:

var StateMap = {

    create_page: { // добавили новый компонент 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});  
                // создаем новый контейнер page в компоненте pages с полученными данными формы              
            }                       
        }
    },
    pages: {
             <!-- компонент pages без изменений (см. пример выше ##Создание массива) -->
    }
}

Итак мы создали компонент create_page для создания новых страниц page c помощью метода массива .add().

После создания контейнера он получает индекс в зависимости от своей позиции в массиве, затем при добавлении новых контейнеров в начало массива или удаления предшествующих контейнеров поле index контейнера также обновится и будет содержать актуальную информацию.