ロジック

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

ここではテンプレートに繰り返しと条件分岐を追加します。

テンプレートの一部を繰り返すには、JavaScriptの評価式を使用して配列プロパティを反復処理します:

${this.myArray.map(item => html`<li>${item}</li>`)}

同様に、テンプレートの一部を条件付きでレンダリングするには、JavaScriptの評価式を使用して真偽値プロパティを使います:

${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}

初期コード

my-element.js

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

class MyElement extends LitElement {
  static get properties() {
    return { 
      message: { type: String } 
      // TODO: 真偽値プロパティを追加
      // TODO: 配列プロパティを追加
    };
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    // TODO: 真偽値プロパティの初期化
    // TODO: 配列プロパティの初期化
  }
  render() {
    return html`
      <p>${this.message}</p>
      <!-- TODO: 繰り返しを追加 -->
      <!-- TODO: 条件分岐を追加 -->
    `;
  }
}
customElements.define('my-element', MyElement);
  

  1. 真偽値と配列のプロパティをpropertiesゲッターへ追加します

    静的プロパティの取得メソッドを次のコードに置き換えます:

     constructor() {
       super();
       this.message = 'Hello world! From my-element';
       this.myBool = true;
       this.myArray = ['an','array','of','test','data'];
     }
    
  2. 真偽値と配列のプロパティを初期化します

    コンストラクタを次のコードに置き換えます:

     ${this.myBool?
       html`<p>Render some HTML if myBool is true</p>`:
       html`<p>Render some other HTML if myBool is false</p>`}
    
  3. テンプレートに繰り返し処理を追加してください

    新しいmyArrayプロパティをループするには、テンプレートに以下のコードを追加してください:

    <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
    
  4. テンプレートに条件を追加してください。

    myBoolの値に基づいて条件付きでレンダリングするには、テンプレートに次のコードを追加してください:

    ${this.myBool ?
      html`<p>Render some HTML if myBool is true</p>` :
      html`<p>Render some other HTML if myBool is false</p>`}
    

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

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.myBool = true;
    this.myArray = ['an','array','of','test','data'];
  }
  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>`}
    `;
  }
}
customElements.define('my-element', MyElement);

次へ: 4. イベント