Смена отображаемых компонентов - render-variant

Свойства с типом "render-variant" используются для отображения в себе одних и скрытия других компонентов;

Например у нас есть компонент page с кнопкой click и свойство variant с типом "render-variant", а также еще два компонента variant1 и variant2, и нам нужно отобразить только один из них в зависимости от ситуации. При загрузке страницы сначала должен отображаться компонент variant1. А второй variant2 - будет скрыт. Поэтому мы создадим разметку index.html без второго компонента, второй компонент мы поместим в template.js файл.

index.html:

<div data-page="container">
    <div data-page-variant="render-variant"> 

            <div data-variant1="container">текст первого варианта</div>

    </div>
    <button data-page-click="click">сменить вариант</button>
</div> 

template.js :

var template =` <div data-variant2="container">текст второго варианта</div> `;

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

    var StateMap ={
            page: {
                container: "page",
                props: ["variant", "click"],
                methods: {

                    click: function(){

                        var variant = this.parent.props.variant; //получаем ссылку на свойство вариант из свойства click;

                        console.log(variant);

                        var newVariant = "variant2"; //имя нового компонента для отображения

                        if(variant.renderChild.pathToCоmponent == "variant2") newVariant = "variant1" //если текущий компонент для отображения "variant2" меняем его на "variant1"

                        variant.setProp(newVariant); //отображаем новый вариант

                    }

                }           
            },
            variant1: {
                container: "variant1",
                props: [],
                methods: {              
                }           
            },
            variant2: {
                container: "variant2",
                props: [],
                methods: {              
                }           
            },
            stateSettings: {
                    templateVar: template, //указали в настройках искать разметку недостающих шаблонов в переменной template из файла template.js
           }            

    }

В примере выше мы создали разметку без второго варианта шаблона, который мы поместили в файл template.js для удобства. Загрузка шаблонов таким способом, создает компоненты синхронно, после того как загрузятся все необходимые js файлы.