イベント

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

ここではlit-htmlの@イベント名という構文で、テンプレート内の要素にイベントリスナーを追加します。また、イベントが発生するたびに呼ばれるイベントハンドラもクラスに追加します。

初期コード

my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String },
      myBool: { type: Boolean },
      myArray: { type: Array }
    };
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    this.myArray = ['an','array','of','test','data'];
    this.myBool = true;
  }
  render() {
    return html`
      <p>${this.message}</p>
      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
      ${this.myBool ?
        html`<p>Render some HTML if myBool is true</p>` :
        html`<p>Render some other HTML if myBool is false</p>`}

      <!-- TODO: ボタンとイベントリスナを登録 -->
    `;
  }
  // TODO: イベントハンドラを実装
}
customElements.define('my-element', MyElement);

  1. テンプレートにイベントリスナー付きのボタンを追加します。

    my-element.jsで、次の <button>要素をHTMLテンプレートに追加してください:

     <button @click="${(event) => this.clickHandler(event)}">Click</button>
    

    バインディングする為の構文 @click=${this.clickHandler}clickイベントのリスナーを追加します。これはclickHandlerメソッドを呼び出します。

  2. クラスにclickHandlerメソッドを追加してください。

    MyElementクラスに以下のメソッドを追加します:

     clickHandler(event) {
       console.log(event.target);
       this.myBool = !this.myBool;
     }
    

    clickHandlerメソッドは前のステップで定義した真偽値のプロパティmyBoolを切り替えます。

このステップの完成したコードはこちらです:

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String },
      myBool: { type: Boolean },
      myArray: { type: Array }
    };
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    this.myArray = ['an','array','of','test','data'];
    this.myBool = true;
  }
  render() {
    return html`
      <p>${this.message}</p>
      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
      ${this.myBool ?
        html`<p>Render some HTML if myBool is true</p>` :
        html`<p>Render some other HTML if myBool is false</p>`}
      <button @click=${this.clickHandler}>Click</button>
    `;
  }
  clickHandler(event) {
    console.log(event.target);
    this.myBool = !this.myBool;
  }
}
customElements.define('my-element', MyElement);

次へ: 5. スタイル