PHP Classes

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

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

Contents

Class file image Download
define(['text!app/bb-todo/templates/item-template.html'], function (itemTemplate) { // Task Item View // -------------- // The DOM element for a todo item... var TaskView = Backbone.View.extend({ //... is a list tag. tagName: "li", // Cache the template function for a single item. template: _.template(itemTemplate), // The DOM events specific to an item. events: { "click .toggle": "toggleDone", "dblclick .view": "edit", "click a.destroy": "clear", "keypress .edit": "updateOnEnter", "blur .edit": "close" }, // The TodoView listens for changes to its model, re-rendering. Since there's // a one-to-one correspondence between a **Todo** and a **TodoView** in this // app, we set a direct reference on the model for convenience. initialize: function () { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); }, // Re-render the titles of the todo item. render: function () { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; }, // Toggle the `"done"` state of the model. toggleDone: function () { this.model.toggle(); }, // Switch this view into `"editing"` mode, displaying the input field. edit: function () { this.$el.addClass("editing"); this.input.focus(); }, // Close the `"editing"` mode, saving changes to the todo. close: function () { var value = this.input.val(); if (!value) { this.clear(); } else { this.model.update({title: value}); this.$el.removeClass("editing"); } }, // If you hit `enter`, we're through editing the item. updateOnEnter: function (e) { if (e.keyCode == 13){ this.close(); } }, // Remove the item, destroy the model. clear: function () { this.model.delete(); } }); return TaskView; });