PHP Classes

File: public/js/app/vue-todo/views/appview.js

Recommend this page to a friend!
  Classes of Sergey Beskorovayniy   Silex MVC Blog   public/js/app/vue-todo/views/appview.js   Download  
File: public/js/app/vue-todo/views/appview.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Silex MVC Blog
MVC based blog using on the Silex micro-framework
Author: By
Last change:
Date: 8 years ago
Size: 3,580 bytes
 

Contents

Class file image Download
define(['vue' ,'app/vue-todo/models/store', 'text!app/vue-todo/templates/template.html'], function (Vue ,todoStorage, template) { 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; }); } }; var appView = new Vue({ // the root element that will be compiled el: '#vue-todo', replace: false, template: template, // app initial state data: { todos: todoStorage.fetch(), newTodo: '', editedTodo: null, visibility: 'all' }, // watch todos change for localStorage persistence watch: { todos: { handler: function (todos) { todoStorage.save(todos); }, deep: true } }, // computed properties // http://vuejs.org/guide/computed.html computed: { filteredTodos: function () { return filters[this.visibility](this.todos); }, remaining: function () { return filters.active(this.todos).length; }, allDone: { get: function () { return this.remaining === 0; }, set: function (value) { this.todos.forEach(function (todo) { todo.completed = value; }); } } }, // methods that implement data logic. // note there's no DOM manipulation here at all. methods: { addTodo: function () { var value = this.newTodo && this.newTodo.trim(); if (!value) { return; } this.todos.push({title: value, completed: false}); this.newTodo = ''; }, removeTodo: function (todo) { this.todos.$remove(todo); }, editTodo: function (todo) { this.beforeEditCache = todo.title; this.editedTodo = todo; }, doneEdit: function (todo) { if (!this.editedTodo) { return; } this.editedTodo = null; todo.title = todo.title.trim(); if (!todo.title) { this.removeTodo(todo); } }, cancelEdit: function (todo) { this.editedTodo = null; todo.title = this.beforeEditCache; }, removeCompleted: function () { this.todos = filters.active(this.todos); } }, // a custom directive to wait for the DOM to be updated // before focusing on the input field. // http://vuejs.org/guide/custom-directive.html directives: { 'todo-focus': function (value) { if (!value) { return; } var el = this.el; Vue.nextTick(function () { el.focus(); }); } } }); // Exposed public methods return appView; });