Application demo

[Gurigraphics]

Added the folder demo to project

Think that the classic demo is a TO-DO list

[Gurigraphics]

I created this challenge to test DOMinus usability and upgrade to 2.0.5

challenge

1- Mount this in HTML

<div id="app">
  <ul id="box">
    <button>---Button---</button>
    <input>
  </ul>
</div>

2- When click in button append this template with "input value" to list in "box"

<div>
    <div>  input value </div>
    <button>X</button>
</div>

3- When click in "X button" delete this element of list

Solution

var DOM = new Dominus()
var HTML = DOM.HTML()
var h = DOM.h()
var $ = DOM.get

HTML.box_btn = { tag:"button", id: "box_content_button", html: "---Button---",  onclick: "EVENT.addlist()" }
HTML.box_input = { tag:"input",  id: "box_content_input",  value: "  insert value" } 

HTML.box = { 
  tag:"ul", 
  id: "box", 
  html: ["box_btn", "box_input"]
} 

DOM.add("box", "#app")

var EVENT = {}
var id = 0

EVENT.addlist = function(){
  id+=1
  var newID = "box_"+id   

  var a = h({ tag: "div", html: $("#box_content_input").val() })
  var b = h({ tag: "button", html: "X", onclick: "EVENT.removeItem( event )", name:newID,  style:"cursor:pointer" })   
  HTML[ newID ] = { tag:"div", id: newID, html: a+b }

  HTML.box.html.push( newID ) 
  HTML.box.tag = "div" // force update
}

EVENT.removeItem = function( event ){

  var id = event.target.name
  delete HTML[ id ]
  HTML.box.tag = "div" // force update
}

I could see this benefit. You can convert the "HTML object" in "JSON" format. After save in browser: localStorage.setItem ("viewState", HTML); Then reload page and all the changes remain.

[Gurigraphics]

Now it has improved a little in organization.

Imports

var DOM = new Dominus()
var HTML = DOM.HTML()
var TEMPLATE = DOM.TEMPLATE()
var FACTORY = DOM.FACTORY()
var EVENTS = DOM.EVENTS()
var h = DOM.h();

structure

HTML.box_content = [
 { tag:"button", id: "box_content_button", html: "---Button---",  onclick: "EVENTS.addlist()" },
 { tag:"input",  id: "box_content_input",  value: "  insert value" } 
] 

HTML.box = { 
  tag:"ul", 
  id: "box", 
  html: "box_content"  
} 

DOM.add("box", "#app")

Templates

FACTORY.base = function( newID, value ){ 

  var div = h( [
    { tag: "div", html: value },
    { tag: "button", parent: newID, html: "X", onclick: "EVENTS.removeItem( event )"},
  ])

  return newDiv = { tag:"div", id: newID, html: div }
}

Events

EVENTS.addlist = function(){

  var getNewId = "box_content_"+DOM.newID() 
  var getInputValue = DOM.getValue("#box_content_input")

  HTML.box_content.push( FACTORY.base( getNewId, getInputValue ) ) 
}

EVENTS.removeItem = function( ev ){

  DOM.remove( DOM.getEventAttr( ev, "parent" ) )
}

Result

<div id="app">
  <ul id="box">
    <button id="box_content_button" onclick="EVENTS.addItem()">---Button---</button>
    <input id="box_content_input" value="  insert value">

    <div id="box_content_101">
       <div>  insert value</div>
      <button parent="box_content_101" onclick="EVENTS.removeItem( event )">X</button>
    </div>

    <div id="box_content_102">
       <div>  insert value</div>
      <button parent="box_content_102" onclick="EVENTS.removeItem( event )">X</button>
    </div>

    <div id="box_content_103">
       <div>  insert value</div>
      <button parent="box_content_103" onclick="EVENTS.removeItem( event )">X</button>
    </div>

    <div id="box_content_104">
       <div>  insert value</div>
      <button parent="box_content_104" onclick="EVENTS.removeItem( event )">X</button>
    </div>

  </ul>
</div>

[Gurigraphics]

Similar demo with Framework Aurelia

Imports

import { Aurelia } from 'aurelia-framework';

export async function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  await aurelia.start();
  await aurelia.setRoot('./app', document.body);
}

App

export class App {
  constructor() {
    this.heading = 'Todos';
    this.todos = [];
    this.todoDescription = '';
  }

  addTodo() {
    if (this.todoDescription) {
      this.todos.push({
        description: this.todoDescription,
        done: false
      });

      this.todoDescription = '';
    }
  }

  removeTodo(todo) {
    let index = this.todos.indexOf(todo);
    if (index !== -1) {
      this.todos.splice(index, 1);
    }
  }
}

Template

<template>
  <h1>${heading}</h1>

  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription" />
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>

  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done" />
      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
      <button click.trigger="removeTodo(todo)">Remove</button>
    </li>
  </ul>
</template>

Online https://codesandbox.io/s/ppmy26opw7?from-embed