Connecting the View to a Model

Based on the Model-View-Controller architectural pattern, the model is the true repository of data, while the view is simply one possible visual representation of that data.  A view's properties are applied to configure that representation, but the raw data itself typically resides in a separate model object; not in the view's properties. Thus, each view needs to be linked to a model.

This can be accomplished by using either of the following methods.

• Using the model property of the view
  
• Using the modelpath property of the view

Using the model property of the view

Each view has a model property that defines the model to which it must be linked. The setModel method sets the model property for the view. Based on the code below, the PromptEditor view block is linked with the ReportInstanceModel model block using a server-side layout definition file. The view attaches event listeners to be notified of changes in the model's properties. Resetting the model property to another object causes the view to re-attach its event listeners and re-render itself.

<!-- Register this JSON object with the factory -->
    var mstrView = mstr.$register('jsonPromptEditor', self);
        var mstrModel = mstr.$register('jsonPromptReportInstanceModel', self);
        mstrView.setModel(mstrModel);        
mstrView.render();

Using the modelpath property of the view

A view can also use the modelpath property that defines the model to which it must be linked. The advantage to using the modelpath property is that the model to which the view must be linked can be selected dynamically by calling a JavaScript method.

The values for the modelpath can be a static path, where it points to another JavaScript object or a dynamic path, where the model is dynamically created through JavaScript code.

In the following example, the simpleAnswerView (view) is linked to the ListCartModel (model) by specifying a dynamic path in the modelpath property, and thus ListCartModel (model) gets dynamically created by calling a JavaScript method. Next, the availableView (view) gets linked to the availableFiltered model which is a child model of ListCartModel (model).

<mstrlayout:bSetProperty path="simpleAnswerView/modelPath" value="parent/model/answer/getListCartModel()" />
<mstrlayout:bSetProperty path="simpleAnswerView/availableView/modelPath" value="parent/model/availableFiltered" />