-
Notifications
You must be signed in to change notification settings - Fork 4
ccm Action Data
content is up-to-date for ccm v18.0.6
Via ccm Action Data, function calls can be specified in JSON and can therefore also be stored in databases and sent via network protocols and can be flexibly executed at a later time.
ccm Action Data consists of an array that contains the function name as the first element and in the other elements optional the parameters which should be passed to the function.
To perform the specified function call, the ccm Action Data simply has to be passed to the helper function ccm.helper.action as first parameter. The return value of this helper function is the return value of the performed function call.
The most common case of using ccm Action Data is specifying dependencies to other external resources within the configuration of a ccm instance.
[ function_name, param1, param2, ... ]
[ "alert", "Hello, World!" ]
Functions within a global namespace can be addressed by dot notation:
[ "console.log", "foo" ]
function add( a, b ) { return a + b; }
const result = ccm.helper.action( [ "add", 1, 2 ] );
console.log( result ); // Result in the browser console: 3
const resource = await ccm.helper.action( [ "ccm.load", {
"url": "https://ccmjs.github.io/ccm/unit_tests/dummy/data.json",
"method": "get"
} ] );
console.log( resource ); // Result in the browser console: { "foo": "bar" }
Import ES6 module from a JavaScript file on a remote server and call a JavaScript function asynchronously:
const result = await ccm.helper.action( [ "ccm.load", {
"url": "https://ccmjs.github.io/ccm/unit_tests/dummy/hello_world.js",
"type": "module",
"import": "hello_world"
} ] );
console.log( result ); // Result in the browser console: "Hello World"
hello_world.js
on another server (CORS allowed)
export function hello_world() {
return "Hello World";
}
/** ccm instance configuration */
const config = {
// dependency to a stylesheet file
"css": [ "ccm.load", "resources/default.css" ],
// dependency to a ccm component
"menu": [ "ccm.component", "../menu/ccm.menu.js", config_for_menu ],
// dependency to a ccm instance and a dataset
"user": [ "ccm.instance", "../user/ccm.user.js", config_for_user ],
// dependency to a ccm datastore
"store": [ "ccm.store", settings_for_datastore ]
};
window.fun = param => console.log( param );
ccm.start( 'https://ccmjs.github.io/akless-components/menu/versions/ccm.menu-2.4.1.js', {
root: document.body,
"css": [ "ccm.load", "https://ccmjs.github.io/akless-components/menu/resources/tabs.css" ],
"data": {
"entries": [
{
"title": "Menu Item A",
"content": "Content of menu entry A",
"actions": [ [ "fun", "foo" ], [ "fun", "bar" ] ]
},
{
"title": "Menu Item B",
"content": "Content of menu entry B",
"actions": [ [ "alert", "Performed action of menu entry B." ] ]
},
{
"title": "Menu Item C",
"content": "Content of menu entry C",
"actions": [ [ "console.log", "Performed action of menu entry C." ] ]
}
]
}
} );