Functions in JSON

Last updated October 25, 2018 by akless - 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. %function_name%
2. with ccm Actions 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

ccm Actions are:

1. [ "ccm.get", "path" ]
2. [ "ccm.load", "path" ]

<script>

  window.fun = ( param ) => { console.log( param ) };

</script>

<script src="https://ccmjs.github.io/akless-components/menu/versions/ccm.menu-2.4.0.js"></script>
<ccm-menu-2-4-0 key='{
    "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", "A1" ], [ "fun", "A2" ] ]
        },
        {
          "title": "Menu Item B",
          "content": "Content of menu entry B",
          "actions": [["console.log", "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."]]
        }
      ]
    }
  }'></ccm-menu-2-4-0>