В руководстве по созданию элементов были рассмотрены основные методы по созданию тодо приложения, но что если мы захотим например чтобы в каждом тодо у нас был свой микрошаблон, например для первого один вариант шаблона, для каждого второго элемента мы захотим показать его порядковый номер при создании, а для каждого третьего мы захотим отобразить в нем общее количество тодо элементов, который будет обновляться при добавлениии и удалении новых.
Для всего этого можно воспользоваться микрошаблонами.
Ссылка на материалы данного урока
stateSettings:{ ///настройки
templatePath: "/template/template.html"
},
<div data-variants1="array">
<p class="border-red" data-variant1="template" data-variant1-text="text" >yy</p>
</div>
<div data-variants2="array">
<div class="border-green" data-variant2="template" >
<p data-variant2-text="text" >yyeee </p>
Номер по счету-<span class="border-green" data-variant2-spantext="text" >span</span>
</div>
</div>
<div data-variants3="array">
<div class="border-blue" data-variant3="template" >
<p data-variant3-text="text" >yyeee </p>
Всего тодос-<span class="border-red" data-variant3-spantext="text" data-variant3-listencount="emiter-counts-dodos" >span</span>
</div>
</div>
fetchComponents: {//будут созданы после асинхронной загрузки шаблонов с папки "/template/template.html"
variants1: {
container: "variant1",
props: ["text"],
methods: {
}
},
variants2: {
container: "variant2",
props: ["text","spantext"],
methods: {
}
},
variants3: {
container: "variant3",
props: ["text", "spantext","listencount"],
methods: {
listencount: function(){
this.parentContainer.props.spantext.setProp(this.emiter.prop);
}
}
},
},
<div data-todo-render="render-variant">
props: ['paragraf', 'completed', 'clickoncheckbox', "removebtn", "render"],
/* добавили "render" */
clickkeydown: function(){
if(event.keyCode !== 13)return;
var outerContainer = this.rootLink.createContainerInArr("todos",
{
paragraf: this.parentContainer.props['input'].getProp(),
});
/* код выше остался без изменения */
var variant = "variants1"; /* создаем переменную варианта названия шаблона для элемента */
if(this.rootLink.state.todos.data.length % 2 == 0 )variant = "variants2";
if(this.rootLink.state.todos.data.length % 3 == 0 )variant = "variants3";
/* В зависимости от положения элемента меняем название переменной шаблона */
/* далее создаем элемент по выбранному шаблону и инициализируем его свойства text, spantext, элемент запишет только те свойства которые в нем есть, если это будет "variants1" то spantext он записывать не будет так, как не содержит этого свойства созданный элемент сохраняем в переменную conainer чтобы из него потом получить html ссылку*/
var conainer = this.rootLink.createContainerInArr(variant, { text: this.parentContainer.props['input'].getProp().charAt(0),
spantext: this.rootLink.state.todos.data.length
} );
/* теперь рендерим наш conainer в родительском контейнере outerContainer а точнее в его вновь созданном свойстве render с помощью метода renderByLink в который передаем название варианта рендэра и ссылку- htmlLink чтобы его потом можно было распознать и удалить при удалении outerContainer */
outerContainer.props.render.renderByLink(variant, conainer.htmlLink);
/* код ниже остался без изменений */
this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.data.length);
}
removebtn: function(){
this.parentContainer.remove();
this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.data.length);
/* код выше остался без изменения */
var cildLinkToRemove = this.parentContainer.props.render["render-variant-htmlLink"];
/*записываем html ссылку дочернего контейнера в переменную, html ссылка и имя массива сохраняется в родительском контейнере после вызова метода .renderByLink(variant, conainer.htmlLink) в который мы их передавали */
var nameArray = this.parentContainer.props.render["render-variant"];
/* записываем имя массива для удаления в переменную*/
this.rootLink.removeByLink(nameArray, cildLinkToRemove);
/* метод удалит контейнер из массива nameArray в котором html ссылка будет равна нашей cildLinkToRemove */
},
К сожалению, не доступен сервер mySQL