JavaScript Framework fairy support js
table of contents
Holding the value

Let's change src/js/modules/index.js.

src/js/modules/index.js 
export class Index {

    constructor() {
    }

    init() {
        this.listener = this.sampleListener.bind(this);
        $f.store().addListener('key1', this.listener);
    }

    setButton_click(event) {
        $f.store().set('key1', this.text.value);
    }

    getButton_click(event) {
        this.obj.textContent = $f.store().get('key1');
    }

    removeListenerButton_click(event) {
        $f.store().removeListener('key1', this.listener);
    }

    sampleListener(k, v) {
        console.log("sampleListener " + k + " : " + v);
    }

}

Let's change src/page/index.html.

src/page/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-obj="text"></div>
    <div><button data-name="setButton">set</button></div>
    <div><button data-name="getButton">get</button></div>
    <div><button data-name="removeListenerButton">removeListener</button></div>
</body>
</html>

You can have the framework hold the value by calling $f.store().set.
You can get the value that the framework holds the value by calling $f.store().get.
You can delete the value that the framework holds the value by calling $f.store().delete.
You can set the function to execute when the value is stored by calling $f.store().addListener. If the function set by addListener return false, value will not be saved.
You can remove the function set by addListener by calling $f.store().removeListenerでaddListener.



Next page AddEventListener

table of contents