Skip to content

Instantly share code, notes, and snippets.

@al-the-x
Created February 23, 2015 16:24
Show Gist options
  • Save al-the-x/0127fe179db580e609a2 to your computer and use it in GitHub Desktop.
Save al-the-x/0127fe179db580e609a2 to your computer and use it in GitHub Desktop.
(function(window) {
'use strict';
var tasks = [{
content: "Taste Javascript",
finished: true
}, {
content: 'Buy a unicorn',
finished: false,
edit: false
}, {
content: 'Hello World',
finished: false,
edit: false
}]
// Your starting point. Enjoy the ride!
new Vue({
el: '#todoapp',
data: {
tasks: tasks,
//initially set to view all items
},
methods: {
noop: function(){ },
//remove tasks
remove: function(task) {
this.tasks.splice(this.tasks.indexOf(task), 1);
},
//add some tasks
addTask: function(tasks) {
var value = this.newTask;
//prevent user from adding empty items to list
if (!value) {
return;
}
this.tasks.push({
content: value,
finished: false
})
this.newTask = '';
},
clearDone: function() {
this.tasks = this.tasks.filter(this.filters.active);
}
},
filters: {
//filter the items on the list by completion
filterTasks: function(tasks) {
var filters = {
"all": function() {
return true;
},
"active": function(task) {
return !task.finished;
},
"completed": function(task) {
return task.finished;
}
}
return this.tasks.filter(filters[this.activeFilter]);
/* // refactored to one line via lookup...
if ( this.activeFilter === 'all' ){
return this.tasks.filter(filters[this.activeFilter]);
return this.tasks.filter(filters['all']);
} else if ( this.activeFilter === 'active' ){
return this.tasks.filter(filters[this.activeFilter]);
return this.tasks.filter(filters['active']);
} else if ( this.activeFilter === 'completed' ){
return this.tasks.filter(filters[this.activeFilter]);
return this.tasks.filter(filters['completed']);
} // */
}
},
computed: {
activeFilter: function(){
return location.hash.slice(2);
},
//calculate the number of active items left to do
itemsLeft: function() {
return this.tasks.filter(this.filters.active).length;
}
}
});
})(window);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" v-model="newTask" v-on="keyup:addTask | key enter"autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List gbitems should get the class `editing` when editing and `completed` when marked as completed -->
<li class="tasks" v-class="completed: task.finished" v-repeat="task: tasks | filterTasks">
<div class="view">
<input class="toggle" type="checkbox" v-model="task.finished">
<label>{{task.content}}</label>
<button class="destroy" v-on="click: remove(task)"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer id="footer">
<!-- This should be `0 items left` by default -->
<span id="todo-count">
<strong v-text="itemsLeft"></strong> {{remaining | pluralize item}} left</span>
<!-- Remove this if you don't implement routing -->
<ul id="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>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button id="clear-completed" v-on="click:clearDone" v-show="tasks.length > itemsLeft">Clear completed ({{tasks.length - itemsLeft}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<!--bower:js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/vue/dist/vue.js"></script>
<script src="../bower_components/lodash/lodash.js"></script>
<!--endbower-->
<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment