Htmlix — это микро фреймворк для построения фронтенд на javascript.
Полное приложение todo mvc можно посмотреть по ссылке в файлах todo.html, /js/todo-mvc.js
Для подключения файлов в проект нужно скопровать папку htmlix по указанной выше ссылке,
пока что данный фремворк находится в тестовой версии, однако уже сейчас позволяет решать типовые задачи фронтенд разработки.
htmlix — микро фреймфорк на основе data- свойств. Из преймуществ это маленький размер, возможность четко структурировать код, наличие пользовательских событий для обновления DOM а также серверный рендеринг на всех языках по умолчанию, т. к. встраивается в существующюю структуру Html файла.
<div data-todo="container">
</div>
var State = {
todo: { /*название нашего элемента (если бы наш контейнер был в массиве то здесь было бы имя массива)*/
container: "todo", /* название нашего контейнера */
props: [],
methods: {
}
}
}
var HM = new HTMLixState(State); /* теперь создаем экземпляр приложения передав ему в качестве параметра наш объект*/
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
</div>
var State = {
todo: {
container: "todo",
props: ['paragraf', 'completed', 'clickoncheckbox'], /*причисляем все свойства */
methods: {
clickoncheckbox: function(){ /* создаем одноименный метод */
console.log(this);
this.parentContainer.props.paragraf.setProp("Новый текст");
}
}
}
}
<div data-todos="array">
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
</div>
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
</div>
</div>
var State = {
todos: { /*теперь у нас элементом является массив поэтому меняем название элемента с todo на todos
container: "todo", /* название контейнера остается тем- же*/
props: ['paragraf', 'completed', 'clickoncheckbox'],
methods: {
clickoncheckbox: function(){
console.log(this);
this.parentContainer.props.paragraf.setProp("Новый текст");
}
}
}
}
<div data-todoinput="container">
<input data-todoinput-input="inputvalue" data-todoinput-clickkeydown="keydown" type="text"/>
</div>
<div data-todos="array">
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
</div>
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
</div>
</div>
var State = {
todos: {
container: "todo",
props: ['paragraf', 'completed', 'clickoncheckbox'],
methods: {
clickoncheckbox: function(){
console.log(this);
this.parentContainer.props.paragraf.setProp("Новый текст");
}
}
},
todoinput: { /* название нового элемента*/
container: "todoinput", /*название контейнера в html после data-*/
props: [ 'input', 'clickkeydown'],
methods: {
clickkeydown: function(){ /* однойменный метод для свойства с типом - событие*/
if(event.keyCode !== 13)return; /*определяем что нажатая клавиша = enter*/
this.rootLink.createContainerInArr("todos", /*создаем новый контейнер в массиве todos*/
{
paragraf: this.parentContainer.props['input'].getProp(),
/*устанавливаем свойство нового контейнера paragraf данными которе мы берем из свойства 'input' находящегося в том же контейнере что и clickkeydown*/
});
}
}
},
}
<!--код выше остался без изменения -->
<div data-todos="array">
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
<button data-todo-removebtn="click" type="button" class="btn btn-danger btn-sm">remove</button>
</div>
<div data-todo="container">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
<button data-todo-removebtn="click" type="button" class="btn btn-danger btn-sm">remove</button>
</div>
</div>
todos: {
container: "todo",
props: ['paragraf', 'completed', 'clickoncheckbox', 'removebtn' ], /*добавили новое свойство*/
methods: {
clickoncheckbox: function(){
console.log(this);
this.parentContainer.props.paragraf.setProp("Новый текст");
},
removebtn: function(){ /* добавили новый метод для свойства 'removebtn' */
this.parentContainer.remove();
}
}
},
/*код выше остался без изменения */
<div data-todolistner="container">
<p data-todolistner-listenerinfo="emiter-counts-dodos" >
<span data-todolistner-info="text">0</span> - элементов
</p>
/*создаем новый элемент*/
var State = {
todolistner: { /*добавили новый элемент*/
container: "todolistner", /*название контейнера элемента */
props: ['listenerinfo', 'info',], /*два свойства*/
methods: {
listenerinfo: function(){
var countsTodo = this.emiter.prop; /*берем новые данные из эмитера событий "emiter-counts-dodos" */
this.parentContainer.props.info.setProp(countsTodo); /*обновляем данные в свойстве 'info'*/
},
}
},
eventEmiters: {
["emiter-counts-dodos"] : { /* добавляем наше событие в список объекта eventEmiters с начальным значением переменной = 0 */
prop: 0,
}
}
removebtn: function(){
this.parentContainer.remove();
this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.lenght);
/*вызвали событие ["emiter-counts-dodos"] в элементе todos методе removebtn, обновив данные prop вызовом функции .setEventProp( новые данные) */
}
/*-------------------------------------------------------------------*/
clickkeydown: function(){
if(event.keyCode !== 13)return;
this.rootLink.createContainerInArr("todos",
{
paragraf: this.parentContainer.props['input'].getProp(),
});
this.rootLink.eventProps["emiter-counts-dodos"].setEventProp( this.rootLink.state.todos.lenght);
}
/*вызвали событие ["emiter-counts-dodos"] в элементе todoinput методе clickkeydown, обновив данные prop вызовом функции .setEventProp( новые данные) */
<div data-todos="array">
<!--- атрибут style="display: none" обязателен для шаблона, удаляется для остальных елементов("container") автоматически-->
<div data-todo="template style="display: none"">
<p data-todo-paragraf="text">Старый текст</p>
<input data-todo-completed="checkbox" data-todo-clickoncheckbox="click" />
<button data-todo-removebtn="click" type="button" class="btn btn-danger btn-sm">remove</button>
</div>
</div>
К сожалению, не доступен сервер mySQL