PHP Classes

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

Recommend this page to a friend!
  Classes of Sergey Beskorovayniy   Silex MVC Blog   public/js/app/bb-todo/views/appview.js   Download  
File: public/js/app/bb-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,700 bytes
 

Contents

Class file image Download
define(['jquery', 'app/bb-todo/views/taskview', 'text!app/bb-todo/templates/stats-template.html'], function ($, TaskView, statsTemplate) { // The Application // --------------- // Our overall **AppView** is the top-level piece of UI. var AppView = Backbone.View.extend({ // Instead of generating a new element, bind to the existing skeleton of // the App already present in the HTML. el: $("#todoapp"), // Our template for the line of statistics at the bottom of the app. statsTemplate: _.template(statsTemplate), // Delegated events for creating new items, and clearing completed ones. events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, // At initialization we bind to the relevant events on the `TaskList` // collection, when items are added or changed. Kick things off by // loading any preexisting TaskList that might be saved in *localStorage*. initialize: function () { var self = this; //-------------------- this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; this.listenTo(app.todo.taskList, 'add', this.addOne); this.listenTo(app.todo.taskList, 'reset', this.addAll); this.listenTo(app.todo.taskList, 'all', this.render); this.footer = this.$('footer'); this.main = this.$('#main-todo'); // Fetch models app.todo.taskList.fetchModels({ success: function (collection, response, options) { self.$el.show(); } }); }, // Re-rendering the App just means refreshing the statistics -- the rest // of the app doesn't change. render: function () { var done = app.todo.taskList.done().length; var remaining = app.todo.taskList.remaining().length; if (app.todo.taskList.length) { this.main.show(); this.footer.show(); this.footer.html(this.statsTemplate({done: done, remaining: remaining})); } else { this.main.hide(); this.footer.hide(); } this.allCheckbox.checked = !remaining; }, // Add a single todo item to the list by creating a view for it, and // appending its element to the `<ul>`. addOne: function (task) { var view = new TaskView({model: task}); this.$("#todo-list").append(view.render().el); }, // Add all items in the **TaskList** collection at once. addAll: function () { app.todo.taskList.each(this.addOne, this); }, // If you hit return in the main input field, create new **Task** model createOnEnter: function (e) { if (e.keyCode != 13){ return; } if (!this.input.val()){ return; } app.todo.taskList.createModel({title: this.input.val()}); this.input.val(''); }, // Clear all done todo items, destroying their models. clearCompleted: function () { _.invoke(app.todo.taskList.done(), 'delete'); return false; }, toggleAllComplete: function () { var done = this.allCheckbox.checked; app.todo.taskList.each(function (task) { task.update({'done': done}); }); } }); return AppView; });