Прослушивание пользовательских событий из свойств массива

Итак давайте разберем отличие свойств контейнера от свойств массива. Например у нас есть массив menu со свойствами class_menu и listener_load_page в котором расположены с конейнеры item со свойствами class_item и text_item:

        <div data-menu="array" data-menu-class_menu="class"  data-menu-listener_load_page="emiter-load-page">

            <div data-item="container" data-item-class_item="class">
              <a data-item-text_item="text"> текст 1 </a>
            </div>

            <div data-item="container" data-item-class_item="class">
              <a data-item-text_item="text"> текст 2 </a>
            </div>

       </div>       

В описании приложения:

  var State ={    
        menu: {

            arrayProps: [ "class_menu", "listener_load_page" ], //свойства массива
            arrayMethods: { 

                    listener_load_page: function() { //обработчик события для свойства массива

                            this.parent.add( this.emiter.getEventProp() ); 
                            //this.parent указывает на массив

                        }
            },
            container: "item", //название контейнера                
                 props: [ "class_item",  "text_item"], // свойства контейнера
            methods: {

            }
        },
        eventEmiters: {  

                ["emiter-load-page"]: { //пользовательское событие с начальными данными

                prop: "",
            }
        }


    }

window.onload = function(){

    var HM = new HTMLixState(State); 

    window.setTimeout( function(){ 

        HM.eventProps["emiter-load-page"].setEventProp( {text_item: "новый текст"} ); //вызвали событие через 3 секунды после создания экземпляра приложения и передали в него данные для нового контейнера.
        console.log(HM);

    }, 3000 );

}    

Как видно из примера выше свойство class_menu и listener_load_page является свойствами массива (arrayProps - в описании приложения), а свойства class_item и text_item - свойствами контейнера item (props - в описании приложения).

В созданном экземпляре приложения вызов this.parent в свойстве контейнера указывает на контейнер, а вызов this.parent в массиве - на массив в котором оно расположено.

Важно правильно размещать свойства - слушателей пользовательских событий, т.к. при размещении его в контейнере, оно вызывается на каждом контейнере, а при размещении в массиве, вызывается только один раз для массива. Поэтому добавлять контейнеры в массив лучше из свойства массива, как в примере выше.