В примере выше мы рассмотрели изменение отображаемых компонентов в свойстве с типом render-variant, шаблон для которого мы загружали из файла template.js, синхронным способом. При загрузке шаблонов данным способом, htmlix создает компоненты только после загрузки template.js файла, при небольших размерах данного файла, это может быть небольшое время. Недостаток данного метода может проявится например если у нас в index.html всего несколько компонентов, а в template.js очень много, и прейдется ждать пока они все загрузятся.
Чтобы избежать этого можно использовать второй метод создания приложения, это догрузка всех шаблонов вторым fetch запросом асинхронно. При данном способе htmlix не ждет загрузки всех шаблонов, а создает компоненты, для которых они уже есть в index.html. А те для которых нет посылает fetch запрос на дозагрузку шаблонов и создает их после того как они загрузятся. Таким образом приложение уже работает пока мы в фоновом режиме создаем остальные компоненты, незаметно для пользователя приложения.
Давайте изменим пример выше и догрузим шаблон для компонента variant2 в fetch запросе:
<div data-page="container">
<div data-page-variant="render-variant">
<div data-variant1="container" >текст первого варианта</div>
</div>
<button data-page-click="click">сменить вариант</button>
</div>
Далее создадим файл template.html и добавим в него шаблон для компонента variant2:
<div data-variant2="container" data-variant2-content="text">текст второго варианта<div>
Добавили шаблон для variant2, и добавили свойство content.
Теперь изменим описание приложения:
var StateMap ={
page: {
container: "page",
props: ["variant", "click"],
methods: {
click: function(){
this.parent.props.variant.setProp("variant2"); //отображаем новый вариант
}
}
},
variant1: {
container: "variant1",
props: [],
methods: {
}
},
fetchComponents: { //поместили компонент в специальный объект fetchComponents, это говорит о том что шаблоны для него нужно искать в файле - templatePath: "./template.html" после их загрузки.
variant2: {
container: "variant2",
props: ["content"],
methods: {
}
},
}
stateSettings: {
templatePath: "./template.html"
}
}
Итак выше мы изменили описание приложения, теперь varian2 у нас помещен в объект fetchComponents что говорит о том что его нужно создать после того как догрузятся шаблоны из файла templatePath: "./template.html" который мы указали в настройках.
После клика по кнопке мы меняем отображаемый компонент в свойстве. Можно не только поменять отображаемый компонент, но и сразу установить ему какие либо свойства: .setProp({componentName: "variant2", content: "новый контент"}) передав параметром объект с именем нового компонента componentName и данными для свойств.