HTML Module

Get html

Description:
Get the HTML markup from:

  1. url – set “url” property on args.
  2. template in file on url – set “url” and “template” properties on args.
  3. schema – set “schema” property on args.
  4. function call – set “function” property on args.
  5. markdown – set “markdown” property on args.

URL example:

{
    "type": "html",
    "action": "get",
    "args": {
        "url": "/templates/template1.html",
        "target": "$data.html"
    }
}

Template example:

{
    "type": "html",
    "action": "get",
    "args": {
        "url": "/templates/template1.html",
        "template": "template1",
        "target": "$data.html"        
    }
}

This uses the binding engine template store.
If the template already exists it returns that.
If it does not, the file content is loaded and registered as the template for future use and also returns the content back.

Schema example:

{
    "type": "html",
    "action": "get",
    "args": {
        "schema": "/schemas/view.json",
        "target": "$data.html"        
    }
}

The schema property can either be the schema JSON or a string on where to load the JSON from.

Function call example:

{
    "type": "html",
    "action": "get",
    "args": {
        "function": "$context.getHTML",
        "parameters":  ["view"]        
    }
}

Define any parameters required by the function for it to work.
In this case we are sending a name of a schema to load.
The function will take care of the details.

Markdown example:

{
    "type": "html",
    "action": "get",
    "args": {
        "markdown": "$context.markdown",
        "parameters":  {
            "id": 1000
        }
    }
}

This makes use of the markdown module to generate HTML from the markdown and inflate it using the standard binding expressions. This works much the same way as the string inflation does.

HTML file to template element

Description:
Load the content of a html file and then create a HTMLTemplateElement where it’s innerHTML is that of the loaded html.

{
    "type": "html",
    "action": "template_from_file",
    "args": {
        "url": "/index.html",
        "target": "$data.template"
    }
}

HTML text to template element

Description:
Construct an HTMLTemplateElement with its innerHTML set to the content that was supplied.

{
    "type": "html",
    "action": "create",
    "args": {
        "html": "<div>${item}</div>",
        "ctx": { "item": "Hello world" }
        "target": "$data.template"
    }
}

This process employs string inflation to incorporate values as specified in the binding expressions. The ‘html’ property can be either an HTML markup string or a path indicating where to retrieve it, following the standard process API path syntax, like “$context.html”.