Update dynamic components authored by Michel Smola's avatar Michel Smola
...@@ -4,8 +4,10 @@ They are written as plain objects that have a couple of special attributes. A ty ...@@ -4,8 +4,10 @@ They are written as plain objects that have a couple of special attributes. A ty
```js ```js
const Field = { const Field = {
base: ({ classList }) => DOMore.create('div', { classList: ['field', ...classList] }), base: ({ classList }) => DOMore.create('div', { classList: ['field', ...classList] }),
parse: value => value; parse: value => value,
validate: value => true; validate: value => true,
labelContainer: null,
valueContainer: null,
init({ onClick, type, label, value }) { init({ onClick, type, label, value }) {
switch (type) { switch (type) {
...@@ -50,7 +52,7 @@ so let's analyse this example a bit: ...@@ -50,7 +52,7 @@ so let's analyse this example a bit:
+ `base` defines what element `this` is going to be in the rest of the component. It can be either a string or a function + `base` defines what element `this` is going to be in the rest of the component. It can be either a string or a function
+ if it is a string such as `'div'`, `'span'`, etc. the base element will be a basic HTMLElement such as a div, span, etc. + if it is a string such as `'div'`, `'span'`, etc. the base element will be a basic HTMLElement such as a div, span, etc.
+ if it is a function the function will be called with the elements properties and children as arguments. The caveat here is that you cannot use `this` in this function as the base element is obviously not available yet. Everything more complicated than creating the base element and maybe adding a couple of classes or attributes should be done in `init` instead. + if it is a function the function will be called with the elements properties and children as arguments. The caveat here is that you cannot use `this` in this function as the base element is obviously not available yet. Everything more complicated than creating the base element and maybe adding a couple of classes or attributes should be done in `init` instead.
+ `parse` and `validate` are the equivalent of class-variables. They are appended to the element before `init` is called. + `parse`, `validate`, `labelContainer`, `valueContainer` are the equivalent of class-variables. They are appended to the element before `init` is called. It is not strictly necessary but good style to initialize all use class-variables between `base` and `init`
+ `init` is the equivalent of a class-constructor. It is called after all methods and properties are appended to the element. This is the place to + `init` is the equivalent of a class-constructor. It is called after all methods and properties are appended to the element. This is the place to
+ create all the children of your main elements and store handles to those that you need to change later on + create all the children of your main elements and store handles to those that you need to change later on
+ add EventListeners + add EventListeners
... ...
......