Single bind

Let's change index.html and index.js to the following.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><input type="text" data-name="sample"></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
    }

}

We created a tag with data-obj attribute in index.html.
When you run and enter a value in the text field on the screen, the value you entered is outputted in the tag with data-obj="obj".
This framework automatically binds the tag with the data-obj attribute value in the web page to the field of the js class corresponding to the web page.
this.obj in index.js will be the object of the tag with data-obj="obj".
Unlike the data-name attribute, the data-obj attribute cannot be specified multiple times by separating them with commas.

Multiple bind

Let's change index.html and index.js to the following

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
        
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
        /*
        This is exactly the same
        this.list.forEach((item) => {
            item.textContent = event.target.value;
        });
        */
        
    }

}

I created a tag with the data-list attribute in index.html.
When you run and enter a value in the text field on the screen, the value you entered is outputted in the tag with data-list="list".
This framework automatically binds the tag with the data-list attribute value in the web page to the field of the js class.
The difference from data-obj is that data-obj is unique value on the screen, but data-list is not unique values on the screen.
To get the object with data-list in js, execute the values method and process it one by one using for.
Alternatively, you can use the forEach method and pass a function as an argument for processing.
Unlike the data-name attribute, the data-list attribute cannot be specified multiple times separated by commas.

Pre-processing and post-processing when bind

You can define pre-processing and post-processing when the field of this class bind to the tag with data-obj or data-list attributes.

index.js

export class Index {

    constructor() {
    }

    beforeBindObj(data) {
        console.log("beforeBindObj");
        console.log(data);
    }
    afterBindObj(data) {
        console.log("afterBindObj");
        console.log(data);
    }

    beforeBindList(data) {
        console.log("beforeBindList");
        console.log(data);
    }
    afterBindList(data) {
        console.log("afterBindList");
        console.log(data);
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
        
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

}

We created beforeBindObj. Arguments are passed an object with name: data-obj attribute value, and value: DOM of the tag with data-obj attribute.
beforeBindObj is the pre-processing when it is binding
We created afterBindObj. Arguments are passed an object with name: data-obj attribute value, and value: DOM of the tag with data-obj attribute.
afterBindObj is the post-processing when it is binding
We created beforeBindList. Arguments are passed an object with name: data-list attribute value, and value: DOM of the tag with data-list attribute.
beforeBindList is the pre-processing when it is binding
We created afterBindList. Arguments are passed an object with name: data-list attribute value, and value: DOM of the tag with data-list attribute.
afterBindList is the post-processing when it is binding

Pre-processing and post-processing when unbind

You can define pre-processing and post-processing when the tag with data-obj, data-list attribute unbind field of this class.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    beforeRemoveObj(data) {
        console.log("beforeRemoveObj");
        console.log(data);
    }
    afterRemoveObj(data) {
        console.log("afterRemoveObj");
        console.log(data);
    }

    beforeRemoveList(data) {
        console.log("beforeRemoveList");
        console.log(data);
    }
    afterRemoveList(data) {
        console.log("afterRemoveList");
        console.log(data);
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    remove_click(event) {
        if (this.obj) {
            delete this.obj.dataset.obj;
        }
        for (const item of this.list.values()) {
            delete item.dataset.list;
        }
        
    }

}

We created beforeRemoveObj. Arguments are passed an object with name: data-obj attribute value, and value: DOM of the tag with data-obj attribute.
beforeRemoveObj is the pre-processing when it is unbinding
We created afterRemoveObj. Arguments are passed an object with name: data-obj attribute value, and value: DOM of the tag with data-obj attribute.
afterRemoveObj is the post-processing when it is unbinding
We created beforeRemoveList. Arguments are passed an object with name: data-list attribute value, and value: DOM of the tag with data-list attribute.
beforeRemoveList is the pre-processing when it is unbinding
We created afterRemoveList. Arguments are passed an object with name: data-list attribute value, and value: DOM of the tag with data-list attribute.
afterRemoveList is the post-processing when it is unbinding

Delete process

Tags with data-obj or data-list attributes can be deleted from the screen

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    remove_click(event) {
        if (this.obj) {
            this.obj = null;
        }
        for (const item of this.list.values()) {
            this.list.remove(item);
        }
        
    }

}

In remove_click, Null is stored in the field binded data-obj.
Executing the remove method of the field binded data-list.
Click the remove button to remove the tags with data-obj, data-list attributes from the screen.

Replacement process

You can replace tags with data-obj or data-list attributes.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="replace">replace</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    replace_click(event) {
        let div = document.createElement('DIV');
        div.dataset.obj = 'obj';
        div.textContent = 'replace';
        this.obj = div;
        
        for (const item of this.list.values()) {
            div = document.createElement('DIV');
            div.dataset.list = 'list';
            div.textContent = 'replace';
            this.list.replace(item, div);
        }
        
    }

}

We write a replace button.
The object newly created by createElement is stored in the field binded data-obj.
Execute the replace method of the field binded data-list and replace it with the newly created object by createElement.

Method of field binded with tag with data-list attribute

Field binded with tags with data-list attributes have toArray, size and has methods in addition to values, forEach, remove and replace.
The toArray method takes no arguments and returns the DOM in this field as an array.
The size method takes no arguments and returns the number of DOM in this field.
The has method requires one argument, pass the DOM. Returns true if the passed DOM is included in this field.

Next page Initial processing of module

table of contents