Created
February 23, 2015 16:24
-
-
Save al-the-x/0127fe179db580e609a2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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