単一紐づけ

src/js/components/sample/controller.js、src/js/components/sample/view.htmlを変更しましょう

export class Sample {

    constructor() {
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
    }

}

<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

view.htmlにdata-sample-obj属性を付けたタグを作成しました
実行して、画面上のテキストフィールドに値を入力すると、data-sample-obj="obj"が付いたタグに入力した値が表示されます
このフレームワークはview.html内のdata-コンポーネント名-obj属性値を持つタグとcontroller.jsクラスのプロパティを自動的に結びつけます
controller.js内のthis.objはdata-コンポーネント名-obj="obj"が付いたタグのオブジェクトとなります
data-コンポーネント名-obj属性はdata-コンポーネント名-name属性とは違い、カンマ区切りで複数指定できません

複数紐づけ

src/js/components/sample/controller.js、src/js/components/sample/view.htmlを変更しましょう

export class Sample {

    constructor() {
    }

    sample_input(event) {
        
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
        /*
        これでも全く同じです
        this.list.forEach((item) => {
            item.textContent = event.target.value;
        });
        */
        
    }

}

<div data-text='v.key1'></div>
<div data-sample-list="list"></div>
<div data-sample-list="list"></div>
<div><input type="text" data-sample-name="sample"></div>

view.htmlにdata-sample-list属性を付けたタグを作成しました
実行して、画面上のテキストフィールドに値を入力すると、data-sample-list="list"が付いたタグに入力した値が表示されます
このフレームワークはwebページ内のdata-コンポーネント名-list属性値を持つタグとcontroller.jsクラスのプロパティを自動的に結びつけます
data-コンポーネント名-objとの違いは、data-コンポーネント名-objは同一値が画面上に1つであるのに対して、data-コンポーネント名-listは画面上に同一値が複数存在可能であることです
js内でdata-コンポーネント名-listの付いたオブジェクトを取得するには、valuesメソッドを実行しforで1つづつ処理していくことになります
または、forEachメソッドを使い、引数に関数を渡して処理していくこともできます
data-コンポーネント名-list属性はdata-コンポーネント名-name属性とは違い、カンマ区切りで複数指定できません

結びつけられる時の前処理、後処理

moduleと同じでbeforeBindObj、afterBindObj、beforeBindList、afterBindListメソッドで結びつけられる時の前処理、後処理を定義できます

結びつけが解除される時の前処理、後処理

moduleと同じでbeforeRemoveObj、afterRemoveObj、beforeRemoveList、afterRemoveListメソッドで結びつけが解除される時の前処理、後処理を定義できます

削除処理

moduleと全く同じです。moduleを参照してください

置換処理

moduleと全く同じです。moduleを参照してください

次ページシングルコンポーネントの初期処理

目次