Commit 62dba564 authored by Evan You's avatar Evan You

update Vue.js example to 0.12.8

parent 286d5701
......@@ -11,29 +11,29 @@
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key enter">
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" v-on="keyup:addTodo | key 'enter'">
</header>
<section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list">
<li class="todo" v-repeat="todos | filterTodos" v-class="completed: completed, editing: this == editedTodo">
<li class="todo" v-repeat="todo: filteredTodos" v-class="completed: todo.completed, editing: todo == editedTodo">
<div class="view">
<input class="toggle" type="checkbox" v-model="completed">
<label v-text="title" v-on="dblclick: editTodo(this)"></label>
<button class="destroy" v-on="click: removeTodo(this)"></button>
<input class="toggle" type="checkbox" v-model="todo.completed">
<label v-on="dblclick: editTodo(todo)">{{todo.title}}</label>
<button class="destroy" v-on="click: removeTodo(todo)"></button>
</div>
<input class="edit" type="text" v-model="title" v-todo-focus="this == editedTodo" v-on="blur: doneEdit(this), keyup: doneEdit(this) | key enter, keyup: cancelEdit(this) | key esc">
<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" v-on="blur: doneEdit(todo), keyup: doneEdit(todo) | key 'enter', keyup: cancelEdit(todo) | key 'esc'">
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count">
<strong v-text="remaining"></strong> {{remaining | pluralize item}} left
<strong v-text="remaining"></strong> {{remaining | pluralize 'item'}} left
</span>
<ul class="filters">
<li><a href="#/all" v-class="selected: activeFilter == 'all'">All</a></li>
<li><a href="#/active" v-class="selected: activeFilter == 'active'">Active</a></li>
<li><a href="#/completed" v-class="selected: activeFilter == 'completed'">Completed</a></li>
<li><a href="#/all" v-class="selected: visibility == 'all'">All</a></li>
<li><a href="#/active" v-class="selected: visibility == 'active'">Active</a></li>
<li><a href="#/completed" v-class="selected: visibility == 'completed'">Completed</a></li>
</ul>
<button class="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining">
Clear completed
......
......@@ -4,6 +4,22 @@
'use strict';
var filters = {
all: function (todos) {
return todos;
},
active: function (todos) {
return todos.filter(function (todo) {
return !todo.completed;
});
},
completed: function (todos) {
return todos.filter(function (todo) {
return todo.completed;
});
}
};
exports.app = new Vue({
// the root element that will be compiled
......@@ -14,25 +30,14 @@
todos: todoStorage.fetch(),
newTodo: '',
editedTodo: null,
activeFilter: 'all',
filters: {
all: function () {
return true;
},
active: function (todo) {
return !todo.completed;
},
completed: function (todo) {
return todo.completed;
}
}
visibility: 'all'
},
// ready hook, watch todos change for data persistence
ready: function () {
this.$watch('todos', function (todos) {
todoStorage.save(todos);
}, true);
}, { deep: true });
},
// a custom directive to wait for the DOM to be updated
......@@ -50,18 +55,14 @@
}
},
// a custom filter that filters the displayed todos array
filters: {
filterTodos: function (todos) {
return todos.filter(this.filters[this.activeFilter]);
}
},
// computed properties
// http://vuejs.org/guide/computed.html
computed: {
filteredTodos: function () {
return filters[this.visibility](this.todos);
},
remaining: function () {
return this.todos.filter(this.filters.active).length;
return filters.active(this.todos).length;
},
allDone: {
get: function () {
......@@ -89,7 +90,7 @@
},
removeTodo: function (todo) {
this.todos.$remove(todo.$data);
this.todos.$remove(todo);
},
editTodo: function (todo) {
......@@ -114,7 +115,7 @@
},
removeCompleted: function () {
this.todos = this.todos.filter(this.filters.active);
this.todos = filters.active(this.todos);
}
}
});
......
......@@ -6,16 +6,16 @@
var router = new Router();
Object.keys(app.filters).forEach(function (filter) {
router.on(filter, function () {
app.activeFilter = filter;
['all', 'active', 'completed'].forEach(function (visibility) {
router.on(visibility, function () {
app.visibility = visibility;
});
});
router.configure({
notfound: function () {
window.location.hash = '';
app.activeFilter = 'all';
app.visibility = 'all';
}
});
......
This diff is collapsed.
......@@ -2,7 +2,7 @@
"private": true,
"dependencies": {
"director": "^1.2.0",
"vue": "^0.11.5",
"vue": "^0.12.8",
"todomvc-common": "^1.0.1",
"todomvc-app-css": "^2.0.0"
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment