Class: Model

maria. Model

new Model()

A constructor function to create new model objects.

var model = new maria.Model();

The most interesting feature of model objects is that they are event targets and so can be observed by any event listeners. Other model objects, view objects, or any other interested objects can observe by being added as event listeners.

For example, the following view object's "update" method will be called when a "change" event is dispatched on the model objects.

var view = {
    update: function(evt) {
        alert('The model changed!');
    }
};
maria.on(model, 'change', view, 'update');

The model can dispatch a "change" event on itself when the model changes.

model.setContent = function(content) {
    this._content = content;
    model.dispatchEvent({type: 'change'});
};

If desired, a model can push additional data to its observers by including that data on the event object.

model.setContent = function(content) {
    var previousContent = this._content;
    this._content = content;
    model.dispatchEvent({
        type: 'change',
        previousContent: previousContent,
        content: content
    });
};

An event listener can be removed from a model object.

maria.off(model, 'change', view, 'update');

A particularly useful pattern is using maria.Model as the "superclass" of your application's model. The following example shows how this can be done at a low level for a to-do application. See maria.Model.subclass for a more compact way to accomplish the same.

checkit.TodoModel = function() {
    maria.Model.apply(this, arguments);
};
checkit.TodoModel.superConstructor = maria.Model;
checkit.TodoModel.prototype = maria.create(maria.Model.prototype);
checkit.TodoModel.prototype.constructor = checkit.TodoModel;
checkit.TodoModel.prototype._content = '';
checkit.TodoModel.prototype._isDone = false;
checkit.TodoModel.prototype.getContent = function() {
    return this._content;
};
checkit.TodoModel.prototype.setContent = function(content) {
    content = checkit.trim('' + content);
    if (this._content !== content) {
        this._content = content;
        this.dispatchEvent({type: 'change'});
    }
};
checkit.TodoModel.prototype.isDone = function() {
    return this._isDone;
};
checkit.TodoModel.prototype.setDone = function(isDone) {
    isDone = !!isDone;
    if (this._isDone !== isDone) {
        this._isDone = isDone;
        this.dispatchEvent({type: 'change'});
    }
};
checkit.TodoModel.prototype.toggleDone = function() {
    this.setDone(!this.isDone());
};

When a model's "destroy" method is called, a "destroy" event is dispatched and all event listeners who've been added for this event type will be notified.

(See evento.EventTarget for advanced information about event bubbling using "addParentEventTarget" and "removeParentEventTarget".)

Source:
  • maria.js, line 1893

Extends

Members

<static> superConstructor

Properties:
Name Type Description
maria.Model.superConstructor
Source:
  • maria.js, line 1902

Methods

<static> subclass()

A function that makes subclassing maria.Model more compact.

The following example creates a checkit.TodoModel constructor function equivalent to the more verbose example shown in the documentation for maria.Model.

maria.Model.subclass(checkit, 'TodoModel', {
    properties: {
        _content: '',
        _isDone: false,
        getContent: function() {
            return this._content;
        },
        setContent: function(content) {
            content = checkit.trim('' + content);
            if (this._content !== content) {
                this._content = content;
                this.dispatchEvent({type: 'change'});
            }
        },
        isDone: function() {
            return this._isDone;
        },
        setDone: function(isDone) {
            isDone = !!isDone;
            if (this._isDone !== isDone) {
                this._isDone = isDone;
                this.dispatchEvent({type: 'change'});
            }
        },
        toggleDone: function() {
            this.setDone(!this.isDone());
        }
    }
});
Source:
  • maria.js, line 3331

addEventListener(type, listener)

If the listener is an object then when a matching event type is dispatched on the event target, the listener object's handleEvent method will be called.

If the listener is a function then when a matching event type is dispatched on the event target, the listener function is called with event target object set as the this object.

One listener (or type/listener pair to be more precise) can be added only once.

et.addEventListener('change', {handleEvent:function(){}});
et.addEventListener('change', function(){});
Parameters:
Name Type Description
type string

The name of the event.
listener Object | function

The listener object or callback function.
Inherited From:
Source:
  • maria.js, line 72

addParentEventTarget(parent)

When an event is dispatched on an event target, if that event target has parents then the event is also dispatched on the parents as long as bubbling has not been canceled on the event.

One parent can be added only once.

var o = new evento.EventTarget();
et.addParentEventTarget(o);
Parameters:
Name Type Description
parent EventTarget

A parent to call when bubbling an event.
Inherited From:
Source:
  • maria.js, line 128

destroy()

When a model is destroyed, it dispatches a destroy event to let listeners (especially containing maria.SetModel objects) that this particular model is no longer useful/reliable.

Source:
  • maria.js, line 1914

dispatchEvent(event)

The event.type property is required. All listeners registered for this event type are called with event passed as an argument to the listeners.

If not set, the event.target property will be set to be this event target.

The evt.currentTarget will be set to be this event target.

Call evt.stopPropagation() to stop bubbling to parents.

et.dispatchEvent({type:'change'});
et.dispatchEvent({type:'change', extraData:'abc'});
Parameters:
Name Type Description
event Object

The event object to dispatch to all listeners.
Inherited From:
Source:
  • maria.js, line 184

removeEventListener(type, listener)

Removes added listener matching the type/listener combination exactly. If this combination is not found there are no errors.

var o = {handleEvent:function(){}};
et.removeEventListener('change', o);
et.removeEventListener('change', fn);
Parameters:
Name Type Description
type string

The name of the event.
listener Object | function

The listener object or callback function.
Inherited From:
Source:
  • maria.js, line 99

removeParentEventTarget(parent)

Removes parent added with addParentEventTarget. If the parent is not found, there are no errors.

var o = {handleEvent:function(){}};
et.removeParentEventTarget(o);
Parameters:
Name Type Description
parent EventTarget

The parent to remove.
Inherited From:
Source:
  • maria.js, line 154