-
-
- With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow
- -bower install slimjs -npm install slim-js- -
- -Data binding and Text-to-data Binding
todo-task-item.js
document.registerElement( - 'todo-task-item', - class extends SlimBaseElement { - - get updateOnAttributes() { - return ['name', 'done', 'todoid'] - } - - get template() { - return ` - <div id="container"> - <span id="number" bind>[[data.todoId]]</span> - <input type="checkbox" done="[done]"/> - <span id="title" text="[name]" bind>[[data.name]]</span> - <input type="button" value="X"> - </div>` - } - - update() { - super.update() // propogate downstream the DOM - var checkbox = this.find('input[type=checkbox]') - var delButton = this.find('input[value="X"]') - - checkbox.dataItem = this.data - if (this.data.done) { - checkbox.setAttribute('checked', 'checked') - } else { - checkbox.removeAttribute('checked') - } - - checkbox.onchange = () => { - checkbox.dataItem.done = checkbox.checked - } - - delButton.onclick = () => { - checkbox.dataItem.delete() - } - } - - })
- -Using repeater
todo-task-list.js
document.registerElement( - 'todo-task-list', - class extends SlimBaseElement { - - // @override - get updateOnAttributes() { - return ['model'] - } - - // @override - get template() { - return `<s-repeat source="items"><todo-task-item></todo-task-item></s-repeat>` - } - - // @override abstract - afterRender() { - this.model.addEventListener('change', () => { - this.find('s-repeat').update() - }) - this.find('s-repeat').update() - }}) - - get items() { - return this.model.todos - }
- -Using injection
Todo.html
<todo-task-list model="{model}"></todo-task-list> -
- - -TodoModel.js
-class TodoModel { - - constructor extends EventDispatcher() { - this.todos = [] - } - - addTask(value) { - this.todos.push( { - name: value, - done: false, - todoId: this.todos.length + 1, - delete: function() { - instance.removeTask(this.todoId) - }}) - - this.dispatchEvent(new Event('change')) - } - - removeTask(taskId) { - this.todos.splice(taskId - 1, 1) - this.todos.forEach( (todo, index) => { - todo.todoId = index + 1 - }) - this.dispatchEvent(new Event('change')) - } - -} - -const singleton = new TodoModel() - -SlimInjector.define('model', () => { return singleton })