Home Manual Reference Source Repository
public class | source

ItemView

Extends:

EventsView → ItemView

The Backbone.View for an item which encapsulates the ability to edit the content of the item. With a desktop browser an Item can be edited with a double click or double tap when running on a mobile device. Zepto is the jQuery equivalent library being used and the touch API is added so additional touch events, doubleTap are available.

Member Summary

Public Members
public get

Delegated events for interacting with an Item.

public
public get

Defines the tag that is created for an Item.

public get

template: *: *

Cache the template function for a single item.

Method Summary

Public Methods
public

clear()

Remove the item, destroy the model.

public

Close the editing mode, saving changes to the todo.

public

edit()

Switch this view into editing mode, displaying the input field.

public

The ItemView listens for changes to its model, re-rendering.

public

Re-render the contents of the Item.

public

Toggle the done state of the model.

public

If you hit enter, we're through editing the item.

Inherited Summary

From class Events
public

bind(): *

Delegates to on.

public

listenTo(obj: object, name: string, callback: function): Events

Tell an object to listen to a particular event on an other object.

public

listenToOnce(obj: object, name: string, callback: function): Events

Just like listenTo, but causes the bound callback to fire only once before being removed.

public

off(name: string, callback: function, context: object): Events

Remove a previously-bound callback function from an object.

public

on(name: string, callback: function, context: object): *

Bind a callback function to an object.

public

once(name: string, callback: function, context: object): *

Just like on, but causes the bound callback to fire only once before being removed.

public

stopListening(obj: object, name: string, callback: function): Events

Tell an object to stop listening to events.

public

Trigger callbacks for the given event, or space-delimited list of events.

public

unbind(): *

Delegates to off.

From class View
public get

The default tagName of a View's element is "div".

public

Cached jQuery context for element.

public

Client ID

public

Cached element

public

$(selector: string): Element | $

If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes.

public

delegate(eventName: string, selector: string, listener: function): View

Add a single event listener to the view's element (or a child element using selector). This only works for delegate-able events: not focus, blur, and not change, submit, and reset in Internet Explorer.

public

Uses jQuery's on function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source. Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el).

public abstract

Initialize is an empty function by default.

public

Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

public abstract

The default implementation of render is a no-op.

public

setElement(element: string | object): View

If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

public

undelegate(eventName: string, selector: string, listener: function): View

A finer-grained undelegateEvents for removing a single delegated event.

public

Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

protected

Produces a DOM element to be assigned to your view.

protected

Ensure that the View has a DOM element to render into.

protected

Remove this view's element from the document and all event listeners attached to it. Exposed for subclasses using an alternative DOM manipulation API.

protected

_setAttributes(attributes: object)

Set attributes from a hash on this view's element. Exposed for subclasses using an alternative DOM manipulation API.

protected

Creates the this.el and this.$el references for this view using the given el.

Public Members

public get events: object: * source

Delegated events for interacting with an Item.

Return:

object

public input: object source

public get tagName: string: string source

Defines the tag that is created for an Item.

Override:

View#tagName

Return:

string

public get template: *: * source

Cache the template function for a single item.

Return:

*

Public Methods

public clear() source

Remove the item, destroy the model.

public closeEdit() source

Close the editing mode, saving changes to the todo.

public edit() source

Switch this view into editing mode, displaying the input field.

public initialize() source

The ItemView listens for changes to its model, re-rendering. Since there's a one-to-one correspondence between an Item and an ItemView. If the model is deleted then the Backbone.View->remove method is invoked.

Override:

View#initialize

public render(): ItemView source

Re-render the contents of the Item.

Override:

View#render

Return:

ItemView

public toggleDone() source

Toggle the done state of the model.

public updateOnEnter(e: object) source

If you hit enter, we're through editing the item.

Params:

NameTypeAttributeDescription
e object

event data