EXC | DEV | Documentation | Version 1.0

Models

A model is a set of data to be manipulated by our controllers.

Models from Views

In our HTML we can explicitly declare a model and bind components or other html elements to a model's field.

A model for a view is created with the attribute m-model.

<div class="view" name="vFindUser" data-controller="ctlUsers" m-model="findFields">

Here we defined or associated the model findFields with our view.

By default our model is available using the namespace exc.models for example:

	exc.models.findfields.username = "ctk";

Bind a component

Inside our view we can bind components to a field in a model using the m-field attribute. For example:

<w type="textbox"  name="fldUsername" placeholder="Username" m-field="username"></w>

In this example the value of our component is associated to the key username of the model findFields.

If the value of the component changes the value of the key in our model is also updated, and if we change the value of our key the component is updated.

Another option is to add the attribute m-field without a field name, in which case the component is associated with a key that has the same name as the component. For example:

<w type="textbox"  name="fldUsername" placeholder="Username" m-field></w>

This component is associated with a key named fldUsername in our model.

Bind an element

The attribute m-field can also be used to bind an element to a key value (one-way binding).

<span m-field="$findFields.username"></span>

Using backend templates you can use the model directive:

{{#model::findFields.username}}

Observing a key

You can register an observer to be notified when a key in the model is modified.

Use myModel.addObserverForKey(keyName, fnCallback, [cookie]) to register an observer and myModel.removeObserverForKey(keyName, fnCallback) to remove the observer.

var myObserver = function(aModel, keyName){
	console.log("The Key [%s] changed to ", keyName, aModel[keyName]);
};

exc.models.findFields.addObserverForKey("username", myObserver);

Observing the model

We can also add an observer to be notified of any changes in the model with myModel.addObserver(fnCallback, [cookie]), for example:

var myObserver = function(aModel, keyName){
	console.log("The Key [%s] changed to ", keyName, aModel[keyName]);
};

exc.models.findFields.addObserver(myObserver);

Model Object

Constructor

var model = new exc.model();

var model = new exc.model(items);

model.keys

aModel.keys.forEach(function(key){
	console.log("Key=%s", key);
});

model.haskey

if( aModel.hasKey(keyName) ){
	console.log("has key %s", keyName);
}

model.serialize

var json = aModel.serialize();

model.asPrimitive

var plainObject = aModel.asPrimitive();