TODO MVC EZ-BIND

HTML

<script src="https://rawgit.com/giabos/ez-bind/master/build/ez-bind.min.js"></script>
<section id="todoapp">
    <header id="header">
        	<h1>todos</h1>

        <input id="new-todo" ez-on="keypress:addNewTask" ez-input="newTask" placeholder="What needs to be done?" autofocus="" />
    </header>
    <section id="main" style="display: block;">
        <input id="toggle-all" type="checkbox" ez-checked="completeAll" />
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            <li ez-repeat="viewedTasks" ez-class="completed:completed">
                <div class="view">
                    <input class="toggle" type="checkbox" ez-checked="completed" />
                    <label ez-text="label"></label>
                    <button class="destroy" ez-on="click:^remove"></button>
                </div>
            </li>
        </ul>
    </section>
    <footer id="footer" style="display: block;">	<span id="todo-count"><strong ez-text="itemsLeft"></strong> items left</span>

        <ul id="filters">
            <li>	<a  class="selected" ez-on="click: filter[0]" ez-class="selected:view[0]">All</a>

            </li>
            <li>	<a  ez-on="click: filter[1]" ez-class="selected:view[1]">Active</a>

            </li>
            <li>	<a  ez-on="click: filter[2]" ez-class="selected:view[2]">Completed</a>

            </li>
        </ul>
        <button id="clear-completed" ez-show="completedCount" ez-on="click:removeCompleted">clear completed (<span ez-text="completedCount"></span>)</button>
    </footer>
</section>

CSS

#filters a {
    cursor: pointer;
    
}

html,
body {
	margin: 0;
	padding: 0;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

body {
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	background: #f5f5f5;
	color: #4d4d4d;
	min-width: 230px;
	max-width: 550px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-weight: 300;
}

button,
input[type="checkbox"] {
	outline: none;
}

.hidden {
	display: none;
}

#todoapp {
	background: #fff;
	margin: 130px 0 40px 0;
	position: relative;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

#todoapp input::input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

#todoapp h1 {
	position: absolute;
	top: -155px;
	width: 100%;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
	color: rgba(175, 47, 47, 0.15);
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
}

#new-todo,
.edit {
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 24px;
	font-family: inherit;
	font-weight: inherit;
	line-height: 1.4em;
	border: 0;
	outline: none;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

#new-todo {
	padding: 16px 16px...

JavaScript

var vm = new EZ(document.getElementById("todoapp"));

vm._apply(function () {
    vm.tasks = [];
    vm.itemsLeft = 0;
    vm.currentFilter = 0;
    vm.completedCount = 0;
});
vm.filterTasks = function () { // 0: all, 1: active, 2: completed
  vm.viewedTasks = vm.tasks.filter(function (a) { return vm.currentFilter === 0 || (vm.currentFilter === 1 && !a.completed) || (vm.currentFilter === 2 && a.completed) ; });
    vm.view = [0,1,2].map(function(a) { return vm.currentFilter === a; });
};
vm._listen('currentFilter', vm.filterTasks);
vm._listen("tasks", vm.filterTasks);
vm._listen("tasks[*].completed", vm.filterTasks);

vm.calculateItemsLeft = function () {
    vm.itemsLeft = vm.tasks.filter(function (a) { return !a.completed; }).length;    
    vm.completedCount = vm.tasks.length - vm.itemsLeft;
};
vm._listen("tasks[*].completed", vm.calculateItemsLeft);
vm._listen("tasks", vm.calculateItemsLeft);
vm.remove = function (evt, idx) {
    vm.tasks.splice(idx, 1);
};

vm.addNewTask = function (evt) {
    if (evt.keyCode == 13) {
        vm.tasks.push({ completed: false, label: vm.newTask });
        vm.newTask = "";
    }
};

vm.filter = [0,1,2].map( function (a) { return function () { vm.currentFilter = a; }; });

vm.removeCompleted = function () {
    vm.tasks.map(function (a,i) { return a.completed ? i : -1; }).filter(function (a) { return a !== -1; }).reverse().forEach(function (i) { vm.tasks.splice(i,1);  });
};

vm._listen('completeAll', function (nv) {
    vm.tasks.forEach(function (a) { a.completed = nv; });
});