Model controls in APS JS SDK allow the binding of UI widgets with the data stored locally in the browser (client) and remotely in the APS database (server).
Developers can use two types of data stores bound with widgets:
Local data store which has bidirectional (two-way) binding with widgets
Local data store which communicates with the backend data source (APS controller) and provides data to widgets
Therefore, there are two main data models:
Model
is a local data store exclusively for bidirectional binding with widgets.
It works on the client side only.
It initializes the bound widgets with new data it gets from another source, for example, from a Store
object.
It listens to changes in bound widgets and updates itself accordingly.
Store
is a local data store for both communicating with the remote data source (APS controller)
and one-way binding with widgets that need data to display on a screen.
It is a way to operate with backend by means of GET, PUT, POST, and DELETE operations.
Some widgets, like Grid
and Select
, can read data from a Store
.
In the following code, a declared Store
object will manage APS resources of the specified APS type (offer):
require([
"aps/ResourceStore",
...,
"aps/ready!"
], function (Store, ...) {
var offerStore = new Store({
apsType: "http://aps-standard.org/samples/vpscloud/offer/1.0",
target: "/aps/2/resources/" + aps.context.vars.cloud.aps.id + "/offers"
...
});
It is possible to add a Resource Query Language filter to the Store declaration using the baseQuery
property.
For example, to extract the links with other resources, you can assign the select
filter to
the baseQuery
property. In the following code, the linked offer will be available for each requested VPS:
var vpsStore = new Store({
apsType: "http://aps-standard.org/samples/basic/vps/2.0",
target: "/aps/2/resources/",
baseQuery: "select(offer)"
});
If the Store declared above is used in a grid, the following column will represent offers linked to VPSes
through the offer
link:
{ field: "offer.name", name: "Offer" }
To output resources from the Store
declared in the previous example, bind the store to a Grid
that will output the received APS resources (offers):
load(["aps/PageContainer", { id: "page" }, [
["aps/Grid", {
id: "grid",
columns: [
{ field: "offername", name: "Name", type: "resourceName" },
{ field: "hardware.memory", name: "RAM, MB" },
...
],
store: offerStore
}, ...
]
]]);
In this example, a Model
object is initialized from a file containing JSON representation of a new offer
with default properties.
require([
"aps/ResourceStore",
...
"dojo/text!./newoffer.json",
"aps/ready!"
], function (Store, ..., newOffer) {
/* Declare the data source */
var model = JSON.parse(newOffer);
...
});
When creating a new offer, use the Model
object from the previous example to sync with the input widgets.
Use the at()
method for this.
var widgets =
["aps/PageContainer", { id: "page"}, [
["aps/FieldSet", { title: true}, [
["aps/TextBox", {
id: "offerName",
label: _("Offer Name"),
value: at(model, "name"),
required: true
}],
["aps/TextBox", {
label: _("Description"),
value: at(model, "description")
}]
]],
...
]];
load(widgets);
Once a user has completed modification of a resource, the synced Model
object must be saved in the remote data source.
The normal way is to use the Store
object to send the resource representation from the Model
object
to the APS controller:
when(vpsStore.put(getPlainValue(model)),
function() { ... }
);