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

Свойства это объекты имеющие доступ к свойствам html страницы, также свойства могут быть слушателями событий. Для создания свойства необходимо указать его имя после имени контейнера, а также указать тип данного свойства. Давайте создадим несколько свойств: my-class, paragraf и btn-click в контейнере page:

<style type="text/css">

  .new_class { color: red; }

</style>

<div data-page="container"> 

    <p data-page-paragraf="text" data-page-my_class="class">  <!-- свойство paragraf с типом "text" и my_class с типом "class" -->
        текст
    </p>

    <button data-page-btn_click="click">Кнопка</button>   <!-- btn_click - свойство - слушательсобытия "click" -->

</div>

Название свойства в html идет после названия контейнера и знака "-" (page-), в самом названии свойства знак "-" использовать нельзя. Далее после знака = идет тип свойсва, у нас три разных типа это "text", "class" и "click". Если тип свойства является событием то в описании приложения, в объекте methods для данного свойства необходимо указать одноименный метод с обработчиком события.

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

var StateMap = {

    page: {
        container: "page",

            props: ["paragraf", "my_class", "btn_click"],  //создали три свойства в контейнере page
            methods: {                          

                btn_click: function(){   //одноименный метод для свойства - события;

                    console.log(this);                          

                    this.parent.props.paragraf.setProp("Новый текст");
                    //this.parent - доступ из конкретного свойства в контейнер 

                    this.parent.props.my_class.setProp("new_class");

                }
            }           
    }
 }

Итак мы создали три свойства одно из которых обработчик события "click". this - в методе указывает на свойство к которому прикреплен данный обработчик - btn_click. Далее с помощью .parent.props мы получаем доступ к контейнеру а далее ко всем свойствам контейнера, затем по имени свойства к конкретному свойству. Метод setProp является универсальным и работает по разному в зависимости от типа свойств, для типа "text" он меняет текст, а для типа "class" он добавляет класс.

После нажатия кнопки изменился текст и добавился новый класс. Далее давайте посмотрим в консоль. После клика в ней появился объект Prop.