EXC | DEV | Documentation | Version 1.0

Models

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

## Models from Views ## {#mcreatev}

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 ### {#mbindcmp}

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 ## {#mbindnode}

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 ## {#observing}

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 ## {#observingm}

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 # {#modelobj}

## Constructor ## {#modelconst}

var model = new exc.model();

var model = new exc.model(items);

## model.keys ## {#modelkeys}

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

## model.haskey ## {#modelhkeys}

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

## model.serialize ## {#modelserialize}

var json = aModel.serialize();

## model.asPrimitive ## {#modelprim}

var plainObject = aModel.asPrimitive();