In this framework, a component a combination of template and JavaScript.

Event processing

Let's change index.html, 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><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.loadSingleComponent(this.obj, 'sample', {'key1': 'val1'})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }
    
    success(nodeList) {
        console.log("success");
    }
    
    error(exception) {
        alert("error");
        console.error(exception);
    }
    
}

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

src/js/components/sample/controller.js

export class Sample {

    constructor() {
    }

    sample_click(event) {
        alert("Hello component");
    }

}

src/js/components/sample/view.html

<div data-text='v.key1'></div>
<button data-sample-name="sample">click</button>

Let's run it and click the sample button.
src/js/components/sample/view.html with the third argument of $f.loadSingleComponent embedded is output.
Pass the directory name under src/js/components as the second argument of loadSingleComponent.
The directory name under src/js/components is called the component name in this framework.
For components, create two files, controller.js and view.html, under src/js/components.
loadSingleComponent method load src/js/components/{component name}/view.html and import src/js/components/{component name}/controller.js.
Then, bind the tag with the data-{component name}-name attribute in view.html to the method of the controller.js class.
If you declare a method named "data-{component name}-name attribute value"_"event name" in controller.js, the tag with data-{component name}-name attribute in view.html is binded to the method named "data-{component name}-name attribute value"_"event name" in controller.js by this framework.
Furthermore, the loadSingleComponent method replaces the body part of the first argument with view.html with the third argument embedded.
The return value of loadSingleComponent is Promise. view.html is embedded in web page and then web page binded with controller.js, then Promise will be resolved.
view.html is treated as a template.
In the template you can use the third argument of the loadSingleComponent method with the variable name v.
It is a rule of this framework to make the class name of controller.js the first uppercase camel case of the directory name.
If you set appendLoadSingleComponent instead of loadSingleComponent, the body part will be added to the body part instead of replacing it.
If you set beforeLoadSingleComponent instead of loadSingleComponent, the body part will be added just before the first argument instead of replacing.
If you set afterLoadSingleComponent instead of loadSingleComponent, the body part will be added immediately after the first argument instead of replacing.
You can also create sub directory under src/js/components. In that case, pass a string as the second argument of loadSingleComponent, separated by periods. The data-{component name}-name attribute value should be hyphenated.
For example, if you created src/js/components/sub/sample/controller.js and view.html, you pass 'sub.sample' as the second argument of loadSingleComponent. The data-{component name}-name attribute is data-sub-sample-name. The class name of controller.js will be Sample.
If the component name is camel case, pass the string as camel case to the second argument of loadSingleComponent. data-{component name}-name attribute should be hyphenated
For example, if you created src/js/components/sampleCamel/controller.js and view.html, you pass 'sampleCamel' as the second argument of loadSingleComponent. The data-{component name}-name attribute will be data-sample-camel-name. The class name of controller.js will be SampleCamel.

Multiple processing

Same as module, you can bind multiple methods separated by commas

Pre-processing, post-processing

Same as module, beforeEvent and afterEvent methods can define common pre-processing and post-processing of events.
If the previously executed method returns false, the later method will not be executed.

Pre-processing and post-processing when bind

Same as module, beforeName and afterName methods can define pre-processing and post-processing when a tag with data-{component name}-name attribute is binded with a method of this class.

Pre-processing and post-processing when the bind is broken

Same as module, beforeRemoveName, afterRemoveName method can define pre-processing and post-processing when the bind between the tag with data-{component name}-name attribute and the method of this class is broken.

Error handling

If the errorHandle method is defined in module, the errorHandle method of module will be executed when an exception is thrown in the process.

End processing

If the finalHandle method is defined in the module, the finalHandle method of the module will be executed regardless of whether the component processing is successful or the exception is thrown.

Call a single component from the template or view.html of component

Example

<script data-load-only='true'>
        l.nestVal = {'key1': 'val1'};
</script>
<div data-single-component='sample2' data-single-component-variable='l.nestVal'></div>

The data-single-component attribute value is the same as the second argument of loadSingleComponent.
The data-single-component-variable attribute value is the same as the third argument of loadSingleComponent.
A single component is loaded inside a tag with the data-single-component, data-single-component-variable attributes.

Next page Binding DOM to single component field

table of contents