В данной статье постараюсь описать все основные возможности нового javascript фреймворка Htmlix, а также рассмотреть принцип его работы на примере создания небольшого приложения.

Данное приложение — это страница простого фильтра товаров по категориям, с различными частями шаблона в карточке товара.

Полный пример данного приложения а текже других, можно посмотреть по ссылке на гитхабе:

Ссылка на примеры, данный пример: page-template.html, /js/page-template.js

Htmlix — это микро фреймворк для построения фронтенда на javascript. Принцип его работы базируется на data- атрибутах.

Для начала работы в html файле делается предварительное описание структуры приложения путем прикрепления data атрибутов с указанием их типа (тип атрибута в кавычках),
например:

 

	 

		
Название 1
		
			
		
		
Краткое описание 1
	
	

		
Название 2
		
			
		
		
Краткое описание 2
	
.......................

data-cards=«array» — создаем массив однотипных элементов
data-card=«container» — контейнеры это набор однотипных элементов, либо это один элемент
если он не помещен в массив, контейнеры содержат все изменяемые и получаемые свойства, а также обработчики и слушатели событий.
data-card-title=«text» — свойство которое содержит доступ к тексту из javscript (this.title.getProp(), .setProp())
data-card-click=«click» — прикрепляет обработчик события click к данному тегу
data-cards-listenfetch=«emiter-fetch-posts» — прикрепляет обработчик пользовательского события «emiter-fetch-posts» к свойству контейнера.
Читать дальше →

https://habr.com/ru/post/456454/?utm_source=habrahabr&utm_medium=rss&utm_campaign=456454