Создание виртуального массива

Виртуальный массив это массив в котором нет ссылки на html тег. Он нужен для создания контейнеров не сгрупированных в одном html элементе а разбросанных по разным свойствам group разных контейнеров.

Например у нас есть три контейнера и в каждом есть свойство с типом group

<div data-pages=array>

    <div data-page="container">
        <div data-page-some_group="group">
        </div>
    </div>
    <div data-page="container">
        <div data-page-some_group="group">
        </div>
    </div>
    <div data-page="container">
        <div data-page-some_group="group">
        </div>
    </div>  
</div> 

    var StateMap ={
            pages: {
                container: "page",
                props: ["some_group"],
                methods: {


                }           
            }               
    }

Теперь в каждом свойстве some_group мы хотим поместить различное количество пунктов меню data-item="container" например в первом 1, во втором 2, в третьем 3 если использовать обычные массивы то нам прийдется создать три одинаковых массива с различным набором data-item="container" и одинаковой функциональностью. Чтобы этого не делать мы создадим один виртуальный массив items а его контейнеры мы распределим между свойствами "some_group"

Итак html код будет выглядеть так:

<div data-pages=array>

    <div data-page="container">
        <div data-page-some_group="group">

            <div data-item="container" data-item-text="text">текст 1</div>  <!-- добавили контейнер item -->

        </div>
    </div>
    <div data-page="container">
        <div data-page-some_group="group">

            <div data-item="container" data-item-text="text">текст 1</div>
            <div data-item="container" data-item-text="text">текст 2</div>

        </div>
    </div>
    <div data-page="container">
        <div data-page-some_group="group">

            <div data-item="container" data-item-text="text">текст 1</div>
            <div data-item="container" data-item-text="text">текст 2</div>
            <div data-item="container" data-item-text="text">текст 3</div>          

        </div>
    </div>  
</div> 

Теперь добавим виртуальный массив items в javascript код:

    var StateMap ={
            pages: {
                container: "page",
                props: ["some_group"],
                methods: {


                }           
            },

        virtualArrayComponents: {   //объект для хранения виртуальных массивов

            items: { //виртуальный массив
                container: "item", //контейнер виртуального массива
                props: ["text"],
                methods: {


                }           
            }
        }   

    }

Теперь открыв в консоли экземпляр приложения можно увидеть что всего в массиве state.items.data у нас 6 контейнеров "item", а в свойстве some_group.groupChild первого контейнера "page" - один, второго - два, третьего - три.

Таким образом с помощью свойства с типом group мы сгрупировали в трех контейнерах "page" массива "pages" различное количество контейнеров "item" из массива 'items'

Заметьте что index контейнера в массиве отличается от индекса контейнера в группе groupId Теперь если мы захотим удалить контейнер из группы, с помощью метода .removeFromGroup(groupID) то он также удалится из виртуального массива.

Важно размещать контейнеры в html разметке непосредственно в теге с типом group избегая каких либо промежуточных тегов, т.к. при инициализации приложение будет искать только непосредственных потомков (this.htmlLink.children) с типом container, И если их обернуть в другой тег, то оно их просто не найдет.