Single bind

Let's change src/js/components/sample/controller.js, src/js/components/sample/view.html

export class Sample {

    constructor() {
    }

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

}

<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

We created a tag with data-sample-obj attribute in view.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-sample-obj="obj".
This framework automatically binds the tag with the data-{component name}-obj attribute in the view.html to the field of the class of controller.js corresponding to the view.html.
this.obj in controller.js will be the object of the tag with data-{component name}-obj="obj".
Unlike the data-{component name}-name attribute, the data-{component name}-obj attribute cannot be specified multiple times by separating them with commas.

Multiple bind

Let's change src/js/components/sample/controller.js, src/js/components/sample/view.html

export class Sample {

    constructor() {
    }

    sample_input(event) {
        
        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;
        });
        */
        
    }

}

<div data-text='v.key1'></div>
<div data-sample-list="list"></div>
<div data-sample-list="list"></div>
<div><input type="text" data-sample-name="sample"></div>

I created a tag with the data-sample-list attribute in view.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-sample-list="list".
This framework automatically binds the tag with the data-{component name}-list attribute value in the web page to the field of the class of the controller.js.
The difference from data-{component name}-obj is that data-{component name}-obj is unique value on the screen, but data-{component name}-list is not unique values ​​on the screen.
To get the object with data-{component name}-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-{component name}-name attribute, the data-{component name}-list attribute cannot be specified multiple times separated by commas.

Pre-processing and post-processing when bind

Same as module, you can define pre-processing and post-processing when binded by beforeBindObj, afterBindObj, beforeBindList, afterBindList method.

Pre-processing and post-processing when unbind

Same as module, beforeRemoveObj, afterRemoveObj, beforeRemoveList, afterRemoveList methods can be used to define pre-processing and post-processing when the connection is unbind.

Delete process

Exactly the same as module. See module.

Replacement process

Exactly the same as module. See module.

Next page Single component initial processing

table of contents