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 following helper functions ccm.helper.html and ccm.helper.format.

In HTML Templates

Most common use of such placeholders is in ccm HTML Data for 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

Regardless of HTML templates, placeholders can also be replaced by functions for any JSON.

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

or

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

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>