obj-ml is a web component that enables a declarative, HTML-based markup language to instantiate, and update, a JavaScript object.
npm install obj-ml
html
`
Results in creating a JavaScript object:
`JSON
{
"prop1": "string property",
"prop2": true,
"prop3": 5,
...
}
`
... and setting property "value" to that JavaScript object. Event "value-changed" is fired as the value changes. The value is passed in the detail, as well as some indication of what part of the object changed, when applicable.
An extending component, o-m, does the same thing as obj-ml, but the syntax will involve less typing, but is more likely to conflict with other web component names.
Also, for both obj-ml and o-m, the part of the attribute that specifies the type of the data can be abbreviated by the first letter, e.g. prop3-i, prop4-d, etc.
Property names are derived by "camelCasing" the attribute name before the type postfix. -obj or -o postfix means use JSON.parse on the attribute (and arrays are objects).
If the property name is not a compound name, or if it ends with a non-recognized postfix, it is assumed to be a string property, and the entire name is camelCased to turn it into a property.
If you need a property to end with one of the reserved types, use it twice:
`html
`
Attribute Changes
obj-ml watches for all attribute changes, and if one changes, it updates the "value", and an event is emitted, containing the name of the property that changed (e.detail.propLastChanged).
Nested obj-ml's
`html
`
results in outer obj-ml having value:
`JSON
{
"subObj": {
"prop1": "string property"
}
}
`
Arrays
`html
`
The advantage of nesting like this, as opposed to using the flat attribute/JSON parse, is changes to the object can be more thoroughly described in the event that is passed.
In addition, css / xpath queries can be done to filter the list.
The disadvantage may be that more memory is used (and more event listening).
Form participation
obj-ml/o-l can partake in forms, becoming part of oForm.elements, formdata, etc.
It might make most sense to include outside the form, but integrate with the form via the form attribute:
`html
`
Priors
A very likely non-exhaustive list:
1. datalist
2. Silverlight XmlDataProvider
[TODO] Use itemref to reference another om element to incorporate repeating data.
Viewing Your Element Locally
1. Install node.
2. Clone or for fork this git repo.
3. In a command prompt from the folder of this git repo:
`
$ npm run serve
``