habrahabr

Создание todo mvc на Htmlix часть 2 — добавление вариантов шаблона в todo container

  • пятница, 21 июня 2019 г. в 00:16:06
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 */

					   
              },

Ну вот теперь наши тодо будут выбирать варианты микрошаблона исходя из номера своего создания.