Models

A model is where we retain the data associated with a component, however they can be create as independant elements in their own right.

When declaring a model it has 2 parameters.

1. The data structure in the form of a JSON object
2. The options which define the model or add user define methods to the element
   • name
   • methods
   • autostore

Example

var homeModel = new model ({
    organisation:'',
    title:'',
    subtitle:'',
    lastlogin:'Last Login 18/05/2018',
    name:'',
    email:'',
    image:'',
},{ name:'home'});

Options definition

• Name : All models have a name if one is not provided the system will generate one.
• Methods : These are user defined method that you design to help manipulate the data.
• autostore : With this set to TRUE the model data is written to local storage ever time the data changes and retreived next time the model is created.

Standard Methods

• getData() : Get the whole model data object.
• setData(dataObj) : Set the whole data object.
• notify(prop) : This method allows you to force an update of all the binds and therefore all the components using the model.
• get(prop)
• set(prop,value,updateBinds = true, force = false) : Update the binds for just this data property. The force property will force a bind update when the new valus is the same as the old one.
• put(prop, value) : PUT is like set but without update of binds.
• applyJSON(json,exclude) : Applys the elements of the JSON object with model the data, excluding and keys found in the exclude string. This does not fire any data binding.
• push(prop,value) : Used where the property is an array
• pop(prop)
• getAt(prop,index) : Returns an element from an array property (zero indexed)
• removeAt(prop,index) : Removes an element from an array property
• insertAt(prop,index,value) Inserts an element into an array property
• asString() : Returns the model data as a string in JSON format
• search(prop,key,value) : Searchs an array property for an key entry value (assumes the elements are JSON objects)

Events

Events are captured by adding a method to the set of methods in the options parameter.

• onupdate(prop,value,oldvalue) : Called when the data is updated;

While models can be declared anywhere it is best practice to declare them in one file like models.js and locate that file in the scripts folder.

Also a model could have a number of array properties that can be used with components, which means you don't need a model for each list, you can simply dataBind to different properties.

var dataModel = new model ({
    genders:[
        {  text:'Male', value:'M' },
        {  text:'Female', value:'F' }
    ],
    status:[
        {  text:'New', value:'N' },
        {  text:'Old', value:'O' }
    ],
},{ name:'dataModel '});