new View()
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' );
require( './mfExtend' )( Section, View, {
template: mw.template.compile( "<h2>{{title}}</h2>" ),
} );
section = new Section( { title: 'Test', text: 'Test section body' } );
section.appendTo( 'body' );
- Source:
Members
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
|
- Source:
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:
tagName
Name of tag that contains the rendered template
Properties:
Name | Type | Description |
---|---|---|
tagName |
string |
- Source:
template
Properties:
Name | Type | Description |
---|---|---|
Specifies |
Mixed | the template used in render(). Object|string |
- Source:
templatePartials
Specifies partials (sub-templates) for the main template. Example:
Properties:
Type | Description |
---|---|
Object |
- Source:
Example
// example content for the "some" template (sub-template will be
// inserted where {{>content}} is):
// <h1>Heading</h1>
// {{>content}}
oo.mfExtend( SomeView, View, {
template: util.template( '<source-code>' ),
templatePartials: { content: util.template( '<source-code>' ) }
}
Methods
(static) make(options, children) → {View}
Generates a view with children
Parameters:
Name | Type | Description |
---|---|---|
options |
Object | |
children |
Array.<jQuery.Element> |
- Source:
Returns:
- Type
- View
after(…contents) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
contents |
string | Node | Array.<Node> | jQuery |
<repeatable> |
- Source:
Returns:
- Type
- this
after(contents) → {this}
Parameters:
Name | Type | Description |
---|---|---|
contents |
function |
- Source:
Returns:
- Type
- this
append(…contents) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
contents |
string | Node | Array.<Node> | jQuery |
<repeatable> |
- Source:
Returns:
- Type
- this
append(contents) → {this}
Parameters:
Name | Type | Description |
---|---|---|
contents |
function |
- Source:
Returns:
- Type
- this
appendTo(target) → {this}
Parameters:
Name | Type | Description |
---|---|---|
target |
string | Node | Array.<Node> | jQuery |
- Source:
Returns:
- Type
- this
before(…contents) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
contents |
string | Node | Array.<Node> | jQuery |
<repeatable> |
- Source:
Returns:
- Type
- this
before(contents) → {this}
Parameters:
Name | Type | Description |
---|---|---|
contents |
function |
- Source:
Returns:
- Type
- this
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:
delegateEvents(events)
Set callbacks, where this.options.events
is a hash of
{ 'event selector': 'callback' }
{ 'mousedown .title': 'edit', 'click .button': 'save', 'click .open': function(e) { ... } }
pairs. 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:
detach(selectoropt) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
selector |
string |
<optional> |
- Source:
Returns:
- Type
- this
hide()
Hides panel
- Source:
initialize(options)
Run once during construction to set up the View
Parameters:
Name | Type | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
options |
Object | Object passed to the constructor. Properties
|
- Source:
insertAfter(target) → {this}
Parameters:
Name | Type | Description |
---|---|---|
target |
string | Node | Array.<Node> | jQuery |
- Source:
Returns:
- Type
- this
insertBefore(target) → {this}
Parameters:
Name | Type | Description |
---|---|---|
target |
string | Node | Array.<Node> | jQuery |
- Source:
Returns:
- Type
- this
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
postRender()
Function called after the view is rendered. Can be redefined in objects that extend View.
- Source:
prepend(…contents) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
contents |
string | Node | Array.<Node> | jQuery |
<repeatable> |
- Source:
Returns:
- Type
- this
prepend(contents) → {this}
Parameters:
Name | Type | Description |
---|---|---|
contents |
function |
- Source:
Returns:
- Type
- this
prependTo(target) → {this}
Parameters:
Name | Type | Description |
---|---|---|
target |
string | Node | Array.<Node> | jQuery |
- Source:
Returns:
- Type
- this
preRender()
Function called before the view is rendered. Can be redefined in objects that extend View.
- Source:
remove(selectoropt) → {this}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
selector |
string |
<optional> |
- Source:
Returns:
- Type
- this
render(data)
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:
show() → {jQuery.Promise}
Shows panel after a slight delay
- Source:
Returns:
- Type
- jQuery.Promise
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:
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: