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);
}
}
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>
$f.store().setでフレームワークに値を保持させることができます
$f.store().getでフレームワークに値を保持させた値を取得することができます
$f.store().deleteでフレームワークに値を保持させた値を削除することができます
$f.store().addListenerで値セットされる時に実行する処理を設定することができます。addListenerで設定した関数がfalseを返すと、値はセットされません
$f.store().removeListenerでaddListenerで設定した関数を削除できます