Config
Table of Contents

Class

O.LabelView

Extends
O.View

A LabelView simply displays a string of text, and optionally has a tooltip. Its DOM structure is:

<span title="$view.tooltip">$view.value</span>

Although you may often want to change the layer tag (e.g. to an h1 etc.)

"use strict";

( function ( NS ) {

var LabelView = NS.Class({

 Extends: NS.View,

Property

O.LabelView#layerTag

  • String

Overrides default in O.View#layerTag.

layerTag: 'span',

Property

O.LabelView.value

  • String

The text to display in the view.

value: '',

Property

O.LabelView#tooltip

  • String

The tooltip for the view.

tooltip: '',

Method

O.LabelView#draw()

Overridden to draw view. See O.View#draw.

draw: function ( layer/*, Element, el*/ ) {
   layer.title = this.get( 'tooltip' );
   layer.textContent = this.get( 'value' );
 },

Method

O.LabelView#labelNeedsRedraw()

Calls O.View#propertyNeedsRedraw for extra properties requiring redraw.

labelNeedsRedraw: function ( self, property, oldValue ) {
     return this.propertyNeedsRedraw( self, property, oldValue );
 }.observes( 'tooltip', 'value' ),

Method

O.LabelView#redrawTooltip( layer )

Updates the title attribute on the DOM layer to match the tooltip property of the view.

Parameters

layerElement The DOM layer for the view.
redrawTooltip: function ( layer ) {
   layer.title = this.get( 'tooltip' );
 },

Method

O.LabelView#redrawValue( layer )

Updates the text content of the DOM layer to match the value property of the view.

Parameters

layerElement The DOM layer for the view.
redrawValue: function ( layer ) {
   layer.textContent = this.get( 'value' );
 }
});

NS.LabelView = LabelView;

}( O ) );
Animation
Application
Core
DataStore
DOM
DragDrop
Foundation
IO
Localisation
Selection
Parser
TimeZones
Storage
Touch
CollectionViews
UA
ContainerViews
ControlViews
PanelViews
View