v 1.1.3


The label element can be used to display any kind of textual information.



The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.



A initial value for the label, OR a function that returns a value. The function is called when you bind the element to a Backbone Model and want to generate the elements value from that model.


value: function(model){
    return model.get('firstName') + ' ' + model.get('lastName');


Set a model here to bind the labels value to a Backbone.Model property (type should be string)


This, or a value function is mandatory for using the model parameter. This is the string key of the models property to use


A string with custom CSS classes to apply to the generated DOM element


A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.


The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.


The default show effect for the element. See associated property description. Default: null


The default hide effect for the element. See associated property description. Default: null


Inherited Properties from modo.Element


Contains the jQuery enhanced DOM Node of this modoJS element.


Contains a internally given, numeric ID for this element.


Will be set by .show() and .hide(). Access this property to check the current visibility of the element.


Set a default show effect (like the options you can pass to the show() / hide() methods.


element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']


Define a default hide effect instead of a simple, instant hide.



Pass a string to get it displayed in the labels DOM element. The string can contain HTML tags. Will trigger the Backbone Event "change".


Returns the current label value.

bindToModel(model, [modelKey=null], [processingFunction=null], [noUpdate=false])this

Binds the element to a Backbone Model. Previous bindings will be detached. If you don't want (or can't) give a modelKey to bind to, you need to provide a processing function that turns a value of the model into a string to be displayed by the label.

The noUpdate parameter means that you don't want to update the labels currently displayed value when binding to a model but wait for later model updates.

If the model fires a change event, the label will be updated.

Inherited Methods from modo.Element


Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.


Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.


    effect: 'slideDown',
    effectArgs: ['fast']


Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.

Note: All modoJS Objects are extended with all methods of the Backbone.Events class.



Triggered, when the labels value has been changed through .set()

Event ParameterDescription


The new value of the label

Inherited Events from modo.Element


Triggered, when the object has been displayed through show()


Triggered, when the object has been hidden through hide()

CSS Classes


Applied to the element.

Inherited CSS Classes from modo.Element


Basic class that will be applied to every element that extends modo.Element.


Will be applied to every modo element where setFlexible(true) has been called upon.

comments powered by Disqus