https://habr.com/ru/post/456874/- JavaScript
- Программирование
В руководстве по созданию элементов были рассмотрены основные методы по созданию тодо приложения, но что если мы захотим например чтобы в каждом тодо у нас был свой микрошаблон, например для первого один вариант шаблона, для каждого второго элемента мы захотим показать его порядковый номер при создании, а для каждого третьего мы захотим отобразить в нем общее количество тодо элементов, который будет обновляться при добавлениии и удалении новых.
Для всего этого можно воспользоваться микрошаблонами.
Ссылка на материалы данного урока
Создание шаблонов
Для создания микрошаблонов нужно в папке template создать файл template.html данная папка используется по умолчанию для загрузки шаблонов, если вы захотите поместить их в другую папку, то нужно будет создать обьект настроек в описании приложения.
stateSettings:{ ///настройки
templatePath: "/template/template.html"
},
Далее в файле temlate.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>
Первый вариант содержит только одно свойство -text, второй два текст и span в котором будет отображаться порядковый номер (text, spantext), третий содержит уже три свойства первые два теже что и у предыдущего, а третье это слушатель пользовательского события «emiter-counts-dodos» которое мы уже создали в предыдущем разделе, в нем мы будем обновлять наш
spantext и отображать текущее количество тодо в массиве тодос.
Создание элементов в javascript
Теперь необходимо дополнить наше описание новыми тремя элементами, чтобы не вставлять все варианты в основной код html мы их загрузим сразу после инициализации приложения но т.к. элементы будут загружены позже, с помощью fetch запроса их необходимо поместить в объект fetchComponents, в описании, выглядеть это будет так:
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);
}
}
},
},
В коде выше мы добавили описание наших трех вариантов массивов и для третьего варианта создали слушателя emiter события «emiter-counts-dodos» — listencount — который будет обновлять количество тодо при добавлении и удалении элементов.
Также необходимо добавить свойство с типом «render-variant» на html страницу в наш контейнер todo (data-todo=«template»):
<div data-todo-render="render-variant">
И не забыть добавить свойство в массив prop нашего контейнера todo:
props: ['paragraf', 'completed', 'clickoncheckbox', "removebtn", "render"],
/* добавили "render" */
Далее потребуется изменить код слушателя нажатия клавиши enter clickkeydown и кнопки удаления тодо — removebtn
Теперь при нажатии кнопки нам нужно будет создать эще один элемент, по шаблонам которые мы загрузили исходя из его расположения относительно других тодо номера:
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 в ней также потребуется удалить вариан элемента микрошаблона когда будем удалять todo:
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 */
},
Ну вот теперь наши тодо будут выбирать варианты микрошаблона исходя из номера своего создания.