al-the-x · February 23, 2015 15:45
diff --git a/app.js b/app.js
 (function(window) {
    'use strict';

    var tasks = [
      {
          content: "Taste Javascript",
          finished: true
      }, {
          content: 'Buy a unicorn',
          finished: false
      }, {
          content: 'Hello World',
          finished: false
      }
    ];

    // Your starting point. Enjoy the ride!
    new Vue({
        el: '#todoapp',
        data: {
            tasks: tasks,
        },
        methods: {
            remove: function(task) {
                this.tasks.splice(this.tasks.indexOf(task), 1);
            },
            clear: function() {
                this.tasks = _.filter(tasks, 'finished', false);
            },
            /**
             * @param Boolean completed whether to markAll as "finished" or not
             *
             * @example
             * vm.markAll(true); // mark all tasks as "finished"
             * vm.markAll(false); // mark all tasks as "unfinished"
             */
            markAll: function(finished) {
                _.forEach(this.tasks, function(task) {
                    task.finished = finished;
                })
            }
        }
    });
 })(window);
diff --git a/index.html b/index.html
 <!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?" autofocus>
 			</header>
 			<!-- This section should be hidden by default and shown when there are todos -->
 			<section id="main">
 				<input id="toggle-all" type="checkbox" v-model="allFinished" v-on="click: markAll(allFinished)">
 				<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 mrked as completed -->
 					<li v-class="completed: task.finished" v-repeat="task: tasks">
 						<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>{{tasks.length}}</strong> item(s) left</span>
 				<!-- Remove this if you don't implement routing -->
 				<ul id="filters">
 					<li>
 						<a class="selected" href="#/">All</a>
 					</li>
 					<li>
 						<a href="#/active">Active</a>
 					</li>
 					<li>
 						<a href="#/completed">Completed</a>
 					</li>
 				</ul>
 				<!-- Hidden if no completed items are left ↓ -->
 				<button id="clear-completed" v-on="click: clear()"></button>
 			</footer>
 		</section>
 		<footer id="info">
 			<p>Double-click to edit a todo</p>
 			<!-- Remove the below line ↓ -->
 			<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></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>
	(function(window) {
	'use strict';

	var tasks = [
	{
	content: "Taste Javascript",
	finished: true
	}, {
	content: 'Buy a unicorn',
	finished: false
	}, {
	content: 'Hello World',
	finished: false
	}
	];

	// Your starting point. Enjoy the ride!
	new Vue({
	el: '#todoapp',
	data: {
	tasks: tasks,
	},
	methods: {
	remove: function(task) {
	this.tasks.splice(this.tasks.indexOf(task), 1);
	},
	clear: function() {
	this.tasks = _.filter(tasks, 'finished', false);
	},
	/**
	* @param Boolean completed whether to markAll as "finished" or not
	*
	* @example
	* vm.markAll(true); // mark all tasks as "finished"
	* vm.markAll(false); // mark all tasks as "unfinished"
	*/
	markAll: function(finished) {
	_.forEach(this.tasks, function(task) {
	task.finished = finished;
	})
	}
	}
	});
	})(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?" autofocus>
	</header>
	<!-- This section should be hidden by default and shown when there are todos -->
	<section id="main">
	<input id="toggle-all" type="checkbox" v-model="allFinished" v-on="click: markAll(allFinished)">
	<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 mrked as completed -->
	<li v-class="completed: task.finished" v-repeat="task: tasks">
	<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>{{tasks.length}}</strong> item(s) left</span>
	<!-- Remove this if you don't implement routing -->
	<ul id="filters">
	<li>
	<a class="selected" href="#/">All</a>
	</li>
	<li>
	<a href="#/active">Active</a>
	</li>
	<li>
	<a href="#/completed">Completed</a>
	</li>
	</ul>
	<!-- Hidden if no completed items are left ↓ -->
	<button id="clear-completed" v-on="click: clear()"></button>
	</footer>
	</section>
	<footer id="info">
	<p>Double-click to edit a todo</p>
	<!-- Remove the below line ↓ -->
	<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></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>