select change

by enginustun

HTML

<script src="https://cdn.jsdelivr.net/gh/muendiz/symponent@latest/src/symponent.min.js"></script>
<div id="container"></div>

CSS

.done{
  text-decoration: line-through;
  background: #ccc;
}

JavaScript

var todos = [
    { name: 'Provide more documentation.', done: false },
    { name: 'Release a new version.', done: false },
    { name: 'ToDo list example.', done: true }
];

var todoComponent = sym.createComponent(
    sym.createElement('div', {},
        sym.createElement('h3', {}, 'To Do List'),
        sym.createElement('input', {
            placeholder: 'enter item to add list',
            events: { // add events to input element
                keyup: function (event, elem) {
                    if (event.keyCode == 13) { // in keyup event, if key is enter then;
                        todos.push({ // push new record to "todos" array
                            name: event.target.value,
                            done: false
                        });
                        event.target.value = '';
                    }
                }
            }
        }),
        sym.createElement('ul', { // create list of todos to show
            loopTemplate: sym.createElement('li', { // list item as loop template
                id: 'todo-{$index + 1}', // template syntax allows arithmetic operations.
                className: '{todo.done ? "done" : ""}', // also allows ternary operation, if current todo item's done property is true, add 'done' class to li element
                loopModel: sym.createLoopModel('todo', todos) // each item in "todos" list will be called as todo 
            },
                sym.createElement('span', {}, '{todo.name}'),
                sym.createElement('input', {
                    type: 'checkbox',
                    checked: '{todo.done}',
                    events: { // add events to checkbox element
                        change: function (e, elem) {
                            elem.model.todo.done = elem.checked; // just assign value to done property to update list.
                        }
                    }
                })
            )
        })
    ),
    'container'
)