Skip link

Site header

<wb-xtemplate> - Web Experience Toolkit - version 5 (Wet5)

It extract the DOM to a JSO. Take a look at the browser console and to the DOM property wbdata of this custom element.

My data

data1

data2

data2

data5a

data5b

data5c
Produce an JS object like 
{
  "data1": {},
  "data2": {},
  "data3": {},
  "data4": [
    {
      "data4a": {},
      "data4b": {},
      "data4c": {},
      "subobj": {
        "data4b": {},
        "data4c": {}
      }
    },
    {
      "data4a": {},
      "data4b": {},
      "data4c": {},
      "subobj": {
        "data4b": {},
        "data4c": {}
      }
    },
    {
      "data4a": {},
      "data4b": {},
      "data4c": {},
      "subobj": {
        "data4b": {},
        "data4c": {}
      }
    }
  ],
  "data5": {
    "data5a": {},
    "data5b": {}
  },
  "data6": {
    "data6a": {}
  }
}

Simple object, one level

Name:
John Smith
Telephone:
555-555-5555

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et est et sem tincidunt posuere. Praesent bibendum vulputate sapien. Vivamus efficitur volutpat ex. Donec semper dolor id tempus porta. Integer mattis posuere velit, sed sollicitudin felis consectetur quis. Fusce porttitor rhoncus vestibulum. Morbi quis porta tortor. Integer dolor libero, tristique eget tortor id, ullamcorper fringilla ipsum.
Produce an JS object like 
{
  "name": {},
  "telephone": {},
  "details": {}
}

Listing

This is about...

Name Telephone Comments
nhoJ htimS 666-666-6666 Lorem Ipsum
Joe Blow 777-777-7777 muspI meroL
No name 888-888-8888
Produce an JS object like 
{
  "subject": {},
  "listing": [
    {
      "name": {},
      "telephone": {},
      "comments": {}
    },
    {
      "name": {},
      "telephone": {},
      "comments": {}
    },
    {
      "name": {},
      "telephone": {},
      "comments": {}
    }
  ]
}

Attribute selector

Value
JSON object
JSON object
Key, value pair
key
JSON Pointer RFC6901 (must start with a "/" character)
Dot notation, similar as JSON pointer, but "." is replaced by "/" and key is prefixed with "/"
value
Temporary default -> DOM object
TODO: Default -> TextContent
TODO: Prefix with "@" follow by attribute name -> Attribute value
TODO: Prefix with "toggle@" follow by attribute name -> Toogle the attribute, example toggle "hidden" attribute to show/hide the DOM node
TODO: Prefix with "token@" follow by attribute name -> The binded value would be an array of string. This is to support attribute with a DOMTokenList value type. Like the class attribute
TODO: Prefix with "json@" follow by the attribute name -> The attribute value are going to be parsed into JSON and used as value

Site footer