Skip to content
Snippets Groups Projects
Commit f6a359d8 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

#29

parent c1c79858
No related branches found
No related tags found
No related merge requests found
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -64,10 +64,12 @@ import {getDocument} from "./util.js";
*
* // Now comes the real magic. we pass the updater the parent HTMLElement
* // and the desired data structure.
* new Updater(body, obj).run();
* const updater = new Updater(body, obj);
* updater.run();
*
* // Now you can change the data structure and the HTML will follow these changes.
* obj['headline'] = "Hello World!"
* const subject = updater.getSubject();
* subject['headline'] = "Hello World!"
*
* @since 1.8.0
* @copyright schukai GmbH
......@@ -123,15 +125,25 @@ class Updater extends Base {
}
/**
* Let the magic begin
*
* The run method must be called for the update to start working.
*
* @return {Promise}
*/
run() {
this.last = {};
// the key __init__has no further meaning and is only
// used to create the diff for empty objects.
this.last = {'__init__':true};
return this.subject.notifyObservers();
}
/**
* If you have passed a ProxyObserver in the constructor, you will get the same object here.
* However, if you have passed a simple object, you will get the ProxyObserver here.
*
* For changes the ProxyObserver must be used.
*
* @since 1.8.0
* @return {ProxyObserver}
*/
......@@ -140,6 +152,8 @@ class Updater extends Base {
}
/**
* This method can be used to register commands that can be called via call: instruction.
* This can be used to provide a pipe with its own functionality.
*
* @param {string} name
* @param {function} callback
......@@ -264,7 +278,7 @@ function insertElement(change) {
if (found === false) break;
if (wd++ > 200) {
throw new Error('the maximum depth for the recursion is reached.');
};
}
}
......@@ -320,7 +334,6 @@ function updateContent(change) {
}
/**
*
* @private
* @since 1.8.0
* @param {HTMLElement} container
......
Monster uses a DOM-based template approach. All Monster templates are
valid, parsable HTML that has been extended with some special attributes.
Monster's updater uses a DOM-based approach. The configuration and the template system are valid and parsable HTML.
## replace
The configuration is done via some special attributes with a `data-monster` prefix.
The simplest manipulation is to replace the content of a tag.
To do this, simply use the `data-monster-replace` attribute.
Code is always the most informative. So let's take a look at a complete example right away.
```
// The first thing to do is to include the Updater class.
import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.9.0/dist/modules/dom/updater.js';
// Now we prepare the html document.
// This is done here via script, but can also be inserted into the document as pure html.
// To do this, simply insert the tag <h1 data-monster-replace="path:headline"></h1>.
const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace','path:headline')
body.appendChild(headline);
// the data structure
let obj = {
headline: "Go!",
};
// Now comes the real magic. we pass the updater the parent HTMLElement
// and the desired data structure.
const updater = new Updater(body, obj);
// now we get the used data structure. why can't we take the original structure?
// the updater puts a proxy over the data structure and thus allows to monitor changes.
// We would not see changes to the original object.
const subject = updater.getSubject();
// now start the updater
updater.run();
// Now you can change the data structure and the HTML will follow these changes.
// to illustrate, let's put the change into a timer call.
setTimeout(function(){
console.log(obj);
subject['headline'] = "Hello!"
},1000);
```
We have seen how we can change the content of an htm element. now let's look at what options are available.
## Replace
The simplest manipulation is to replace the content of a HTMLElement.
To do this, simply use the `data-monster-replace` attribute (see example).
```
<div data-monster-replace="static:hello"></div>
......@@ -15,3 +59,8 @@ The result is then the following html:
```
<div data-monster-replace="static:hello">hello</div>
```
A full example looks like this:
......@@ -7,10 +7,10 @@
},
"getting-started": {
"title": "Getting Started"
}
},
"dom-based-templating-implementation.md": {
"dom-based-templating-implementation": {
"title": "DOM-based templating implementation"
}
}
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment