Functions in JSON

content is up-to-date for ccm v18.0.6

Description

The JSON data format does not allow JavaScript functions. Therefore, we had to look for a workaround, to get functions included into JSON structures. ccm offers two main ways to include functions into JSON data structures:

1. with placeholders, e.g. %event%
2. with ccm Action Data, e.g. [ "ccm.load", "path" ]

Examples

With Placeholders

This works with the helper functions ccm.helper.html and ccm.helper.format. Most common use of such placeholders is in ccm HTML Data for HTML templates. Regardless of HTML templates, placeholders can also be replaced by functions for any JSON.

In HTML Templates

const html = {
  "tag": "button",
  "id": "%id%",
  "inner": "%caption%",
  "onclick": "%click%"
}
const button = ccm.helper.html( html, {
  id: 'feedback-btn',
  caption: 'Feedback',
  click: () => console.log( 'Thanks for Feedback!' )
} );
document.body.appendChild( button );

or

const html = {
  "tag": "button",
  "id": "%%",
  "inner": "%%",
  "onclick": "%%"
}
const button = ccm.helper.html( html, "feedback-btn", "Feedback", () => console.log( 'Thanks for Feedback!' ) );
document.body.appendChild( button );

In any JSON

const json = {
  "id": "greeting",
  "sayHello": "%fkt%"
};
const obj = ccm.helper.format( json, {
  fkt: () => console.log( 'Hello, World!' )
} );
obj.sayHello();

or

const json = {
  "id": "greeting",
  "sayHello": "%%"
};
const obj = ccm.helper.format( json, () => console.log( 'Hello, World!' ) );
obj.sayHello();

With ccm Action Data

See here.