Model controls in APS JS SDK allow binding 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:
Therefore, there are two main data models:
Model
is a local data store that serves exclusively for bidirectional binding with widgets.Store
object.Store
is a local data store that may serve both for communicating with the remote data source (APS controller)
and for one-way binding with widgets that need data to display on a screen.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() { ... }
);