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. via placeholders, e.g. %function_name%
2. via ccm Actions Data, e.g. [ "ccm.load", "path" ]

In detail:

1. Placeholders

This works with the following helper functions ccm.helper.html and ccm.helper.format. Most common use of such placeholders is in HTML templates. For example:

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 );

2. 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>