Expand all

View

Describes a component for rendering.

Should be extended using extend().

When options contains el property, this.$el in the constructed object will be set to the corresponding jQuery object. Otherwise, this.$el will be an empty div.

When extended using extend(), if the extended prototype contains template property, this.$el will be filled with rendered template (with options parameter used as template data).

template property can be a string which will be passed to mw.template.compile() or an object that has a render() function which accepts an object with template data as its argument (similarly to an object created by mw.template.compile()).

You can also define a defaults property which should be an object containing default values for the template (if they're not present in the options parameter).

If this.$el is not a jQuery object bound to existing DOM element, the view can be attached to an element using appendTo(), prependTo(), insertBefore(), insertAfter() proxy functions.

append(), prepend(), before(), after() can be used to modify $el. on() can be used to bind events.

You can also use declarative DOM events binding by specifying an events map on the class. The keys will be 'event selector' and the value can be either the name of a method to call, or a function. All methods and functions will be executed on the context of the View.

Inspired from Backbone.js https://github.com/jashkenas/backbone/blob/master/backbone.js#L1128

Example:

    var
      MyComponent = View.extend( {
        edit: function ( ev ) {
          //...
        },
        save: function ( ev ) {
          //...
        }
      } ),
      instance = new MyComponent({
        events: {
          'mousedown .title': 'edit',
          'click .button': 'save',
          'click .open': function(e) { ... }
        }
      });

Example:

    var View, section;
    function Section( options ) {
      var defaultOptions = {
        events: {
          // ...
        }
      }
      View.call( this, util.extends( {}, defaultOptions, options ) );
    }
    View = require( './View' );
    class Section extends View {
      get template() {
        return mw.template.compile( "<h2>{{title}}</h2>" ),
      }
    }
    section = new Section( { title: 'Test', text: 'Test section body' } );
    section.appendTo( 'body' );

Constructor

new View(options) #

Parameters:

Name Type Description
options Object

Object passed to the constructor.

Properties:
Name Type Attributes Description
events Object.<string, string> optional
Mixes in:
Source:

Properties

defaults #

A set of default options that are merged with options passed into the initialize function.

Properties:

Name Type Description
defaults Object

Default options hash.

Properties:
Name Type Attributes Description
el jQuery.Object | string optional

jQuery selector to use for rendering.
skipTemplateRender boolean optional

Whether to enhance views already in DOM. When enabled, the template is disabled so that it is not rendered in the DOM. Use in conjunction with View::defaults.$el to associate the View with an existing already rendered element in the DOM.
Source:

A set of default options that are merged with options passed into the initialize function.

isTemplateMode #

Tells the View to ignore tagName and className when constructing the element and to rely solely on the template

Properties:

Name Type Description
isTemplateMode boolean
Source:

Tells the View to ignore tagName and className when constructing the element and to rely solely on the template

tagName #

Name of tag that contains the rendered template

Properties:

Name Type Description
tagName string
Source:
Name of tag that contains the rendered template

template #

Properties:

Name Type Description
Specifies Object

the template used in render().
Source:

templatePartials #

Specifies partials (sub-templates) for the main template. Example:

Example

// example content for the "some" template (sub-template will be
    // inserted where {{>content}} is):
    // <h1>Heading</h1>
    // {{>content}}

    class SomeView extends View {
      get template() { return util.template( '<source-code>' ) }
      get templatePartials() { return { content: util.template( '<source-code>' ) } }
    }

Properties:

Type Description
Object
Source:
Specifies partials (sub-templates) for the main template.

Methods

after(…contents) → {View} #

Parameters:

Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery repeatable
Source:

Returns:

Type
View

after(contents) → {View} #

Parameters:

Name Type Description
contents function
Source:

Returns:

Type
View

append(…contents) → {View} #

Parameters:

Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery repeatable
Source:

Returns:

Type
View

append(contents) → {View} #

Parameters:

Name Type Description
contents function
Source:

Returns:

Type
View

appendTo(target) → {View} #

Parameters:

Name Type Description
target string | Node | Array.<Node> | jQuery
Source:

Returns:

Type
View

before(contents) → {View} #

Parameters:

Name Type Description
contents function
Source:

Returns:

Type
View

delegate(eventName, selector, listener) #

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 or blur.

Parameters:

Name Type Description
eventName string
selector string
listener function
Source:

Add a single event listener to the view's element (or a child element using selector).

delegateEvents(events) #

Set callbacks for events.

this.options.events is a hash of pairs:

{ 'event selector': 'callback' }

{
  'mousedown .title': 'edit',
  'click .button': 'save',
  'click .open': function(e) { ... }
}

Callbacks will be bound to the view, with this set properly. Uses event delegation for efficiency. Omitting the selector binds the event to this.el.

Parameters:

Name Type Description
events Object

Optionally set this events instead of the ones on this.
Source:
Set callbacks for events.

detach([selector]) → {View} #

Parameters:

Name Type Attributes Description
selector string optional
Source:

Returns:

Type
View

initialize(options) #

Run once during construction to set up the View

Parameters:

Name Type Description
options Object

Object passed to the constructor.

Properties:
Name Type Attributes Description
events Object.<string, string> optional
Source:
Run once during construction to set up the View

insertAfter(target) → {View} #

Parameters:

Name Type Description
target string | Node | Array.<Node> | jQuery
Source:

Returns:

Type
View

insertBefore(target) → {View} #

Parameters:

Name Type Description
target string | Node | Array.<Node> | jQuery
Source:

Returns:

Type
View

parseHTML(html) → {jQuery.Object} #

See parseHTML method of util singleton

Parameters:

Name Type Description
html string

to turn into a jQuery object.
Source:

Returns:

Type
jQuery.Object
See parseHTML method of util singleton

postRender() #

Function called after the view is rendered. Can be redefined in objects that extend View.

Source:
Function called after the view is rendered.

preRender() #

Function called before the view is rendered. Can be redefined in objects that extend View.

Source:
Function called before the view is rendered.

prepend(…contents) → {View} #

Parameters:

Name Type Attributes Description
contents string | Node | Array.<Node> | jQuery repeatable
Source:

Returns:

Type
View

prepend(contents) → {View} #

Parameters:

Name Type Description
contents function
Source:

Returns:

Type
View

prependTo(target) → {View} #

Parameters:

Name Type Description
target string | Node | Array.<Node> | jQuery
Source:

Returns:

Type
View

remove([selector]) → {View} #

Parameters:

Name Type Attributes Description
selector string optional
Source:

Returns:

Type
View

render(data)chainable #

Fill this.$el with template rendered using data if template is set.

Parameters:

Name Type Description
data Object

Template data. Will be merged into the view's options
Source:
Fill this.$el with template rendered using data if template is set.

undelegate(eventName, selector, listener) #

A finer-grained undelegateEvents for removing a single delegated event. selector and listener are both optional.

Parameters:

Name Type Description
eventName string
selector string
listener function
Source:
A finer-grained undelegateEvents for removing a single delegated event.

undelegateEvents() #

Clears all callbacks previously bound to the view by delegateEvents. You usually don't need to use this, but may wish to if you have multiple views attached to the same DOM element.

Source:
Clears all callbacks previously bound to the view by delegateEvents.

make(options, children) → {View}static #

Generates a view with children

Parameters:

Name Type Description
options Object
children Array.<jQuery.Element>
Source:

Returns:

Type
View
Generates a view with children