JavaScript Framework fairy support js
Component constants

Whole system

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.loadUniqueComponent(this.obj, 'sample')
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }
    
    success(nodeList) {
        console.log("success");
    }
    
    error(exception) {
        alert("error");
        console.error(exception);
    }
    
}

Let's change 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($f.componentEnvValue(this, 'key1') + ' ' + $f.componentEnvValue(this, 'key2') + ' ' + $f.componentEnvValue(this, 'key3'));
    }

}
src/js/components/sample/view.html
<button data-sample-name="sample">component sample</button>

Let's create src/js/components/envValue.json, src/js/components/envValue.local.json

src/js/components/envValue.json
{
     "key1" : "value1"
    ,"key2" : "value2"
}
src/js/components/envValue.local.json
{
     "key2" : "value2_local"
    ,"key3" : "value3_local"
}

After executing and clicking the sample button, let's click the component sample button.
value1 value2_local value3_local are output
The $f.componentEnvValue called in controller.js is the method that returns the value of envValue.json under src/js/components.
componentEnvValue receives the component instance as the first argument and the key of envValue.json as the second argument.
Since envValue.json is json, enclose the key and value in double quotes. Not a single quote.
Create envValue.json used for component under src/js/components. . This is a framework rule.
Also, you can prepare envValue.{Environment}.json as well as envValue.json.
If both envValue.json and envValue.local.json have the same key, envValue.local.json takes precedence.


Component specific

Let's create src/js/components/sample/envValue.json, src/js/components/sample/envValue.local.json

src/js/components/sample/envValue.json
{
    "key2" : "sample_value2"
}
src/js/components/sample/envValue.local.json
{
    "key3" : "sample_value3_local"
}

After executing and clicking the sample button, let's click the component sample button.
value1 sample_value2 sample_value3_local are output.
envValue.json created under src/js/components/sample can be used only when the first argument of componentEnvValue method is an instance of src/js/components/sample/controller.js.


Next page Component message

table of contents