EXC | DEV | Documentation | Version 1.0
A model is a set of data to be manipulated by our controllers.
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";
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.
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}}
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);
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);
var model = new exc.model();
var model = new exc.model(items);
aModel.keys.forEach(function(key){
console.log("Key=%s", key);
});
if( aModel.hasKey(keyName) ){
console.log("has key %s", keyName);
}
var json = aModel.serialize();
var plainObject = aModel.asPrimitive();