Whole system

Let's change src/js/components/sample/controller.js.

src/js/components/sample/controller.js

export class Sample {

    constructor() {
    }

    sample_click(event) {
        alert(
            $f.componentMsg(this, 'key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'}) + "\n" +
            $f.componentMsg(this, 'key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'})
        );
    }

}

Let's create src/js/components/msg.json, src/js/components/msg.ja.json, src/js/components/msg.ja-JP.json, src/js/components/msg.en.json, src/js/components/msg.en-US.json.

msg.json

{
     "key1" : "key1 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja.json

{
     "key1" : "key1 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja-JP.json

{
     "key1" : "key1 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en.json

{
     "key1" : "key1 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en-US.json

{
     "key1" : "key1 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

After executing and clicking the sample button, let's click the component sample button.
The value in the json file created under src/js/components is output.
$f.componentMsg called in controller.js is method that return the value in msg.json created under src/js/components.
componentMsg receives the component instance as the first argument and the key of msg.json as the second argument.
The third argument of the componentMsg method is the value that replaces the part enclosed in ${} in json. If you don't want to replace it, please add \.
Since msg.json is json, enclose the key and value in double quotes. Not a single quote.
msg.json used in the component is created under src/js/components. This is a framework rule.
Also, you can prepare msg.{Language}.json as well as msg.json.
The language to be used is applied in the order of priority of the value of the query parameter lang, the value of navigator.language.
Therefore, if you access the URL with ?lang=en, the value defined in msg.en.json will be output.
If msg.{Language to use}.json does not exist, msg.json will be applied.
Therefore, if you delete msg.ja.json, msg.ja-JP.json, msg.en.json, msg.en-US.json and access web page, the value defined in msg.json will be output.

Component specific

Let's change src/js/components/sample/msg.json, src/js/components/sample/msg.ja.json, src/js/components/sample/msg.ja-JP.json, src/js/components/sample/msg.en.json, src/js/components/sample/msg.en-US.json.

src/js/components/sample/msg.json

{
     "key1" : "key1 => component ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.ja.json

{
     "key1" : "key1 => component ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.ja-JP.json

{
     "key1" : "key1 => component ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.en.json

{
     "key1" : "key1 => component en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/components/sample/msg.en-US.json

{
     "key1" : "key1 => component en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => component en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

After executing and clicking the sample button, let's click the component sample button.
The value in the json file created under src/js/components/sampleis output.
msg.json created under src/js/components/sample can be used only when the first argument is an instance of src/js/components/sample/controller.js.

Next page Receive the value from the server in order to pass component

table of contents