Итак давайте разберем отличие свойств контейнера от свойств массива.
Например у нас есть массив 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 в массиве - на массив в котором оно расположено.
Важно правильно размещать свойства - слушателей пользовательских событий, т.к. при размещении его в контейнере, оно вызывается на каждом контейнере, а при размещении в массиве, вызывается только один раз для массива. Поэтому добавлять контейнеры в массив лучше из свойства массива, как в примере выше.