github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/examples/todomvc/js/app.js (about)

     1  /*global Vue, todoStorage */
     2  
     3  (function (exports) {
     4  
     5  	'use strict';
     6  
     7  	var filters = {
     8  		all: function (todos) {
     9  			return todos;
    10  		},
    11  		active: function (todos) {
    12  			return todos.filter(function (todo) {
    13  				return !todo.completed;
    14  			});
    15  		},
    16  		completed: function (todos) {
    17  			return todos.filter(function (todo) {
    18  				return todo.completed;
    19  			});
    20  		}
    21  	};
    22  
    23  	exports.app = new Vue({
    24  
    25  		// the root element that will be compiled
    26  		el: '.todoapp',
    27  
    28  		// app initial state
    29  		data: {
    30  			todos: todoStorage.fetch(),
    31  			newTodo: '',
    32  			editedTodo: null,
    33  			visibility: 'all'
    34  		},
    35  
    36  		// watch todos change for localStorage persistence
    37  		watch: {
    38  			todos: {
    39  				handler: function (todos) {
    40  				  todoStorage.save(todos);
    41  				},
    42  				deep: true
    43  			}
    44  		},
    45  
    46  		// computed properties
    47  		// http://vuejs.org/guide/computed.html
    48  		computed: {
    49  			filteredTodos: function () {
    50  				return filters[this.visibility](this.todos);
    51  			},
    52  			remaining: function () {
    53  				return filters.active(this.todos).length;
    54  			},
    55  			allDone: {
    56  				get: function () {
    57  					return this.remaining === 0;
    58  				},
    59  				set: function (value) {
    60  					this.todos.forEach(function (todo) {
    61  						todo.completed = value;
    62  					});
    63  				}
    64  			}
    65  		},
    66  
    67  		// methods that implement data logic.
    68  		// note there's no DOM manipulation here at all.
    69  		methods: {
    70  
    71  			addTodo: function () {
    72  				var value = this.newTodo && this.newTodo.trim();
    73  				if (!value) {
    74  					return;
    75  				}
    76  				this.todos.push({ title: value, completed: false });
    77  				this.newTodo = '';
    78  			},
    79  
    80  			removeTodo: function (todo) {
    81  				this.todos.$remove(todo);
    82  			},
    83  
    84  			editTodo: function (todo) {
    85  				this.beforeEditCache = todo.title;
    86  				this.editedTodo = todo;
    87  			},
    88  
    89  			doneEdit: function (todo) {
    90  				if (!this.editedTodo) {
    91  					return;
    92  				}
    93  				this.editedTodo = null;
    94  				todo.title = todo.title.trim();
    95  				if (!todo.title) {
    96  					this.removeTodo(todo);
    97  				}
    98  			},
    99  
   100  			cancelEdit: function (todo) {
   101  				this.editedTodo = null;
   102  				todo.title = this.beforeEditCache;
   103  			},
   104  
   105  			removeCompleted: function () {
   106  				this.todos = filters.active(this.todos);
   107  			}
   108  		},
   109  
   110  		// a custom directive to wait for the DOM to be updated
   111  		// before focusing on the input field.
   112  		// http://vuejs.org/guide/custom-directive.html
   113  		directives: {
   114  			'todo-focus': function (value) {
   115  				if (!value) {
   116  					return;
   117  				}
   118  				var el = this.el;
   119  				Vue.nextTick(function () {
   120  					el.focus();
   121  				});
   122  			}
   123  		}
   124  	});
   125  
   126  })(window);