メインコンテンツまでスキップ

TodoMVC

概要​

このチュートリアルは宜搭の上級使用チュートリアルに属し、TodoMVC の機能を参考にして、ゼロから簡易なTodoMVCページを構築します。最終的な効果は以下の通りです（ユーザーは サンプルページ にアクセスして効果を確認するか、このアプリケーションを有効にして試用する ことができます）：

このチュートリアルを通じて、以下の宜搭スキルを習得することができます：

  • 宜搭基本コンポーネントの使用；
  • ユーザー操作イベント処理；
  • グローバル変数の使用；
  • 条件レンダリング&ループレンダリングの使用；
  • カスタムスタイル；
  • リモートAPIの使用；
  • 宜搭OpenAPIの使用；

この文書では、宜搭でカスタムページを作成・展開する具体的なプロセスについて詳しく説明しません。作成プロセスが不明な場合は、クイックスタート ドキュメントをご覧ください。以下では、1ステップずつ上記の効果を実現していきましょう。

基本UI——TodoMVCに基本的な骨組みを与える​

まず、公式のTodoMVCページの構造を分解します。概ね以下の内容が含まれます：

TodoMVCのUI表示に基づき、宜搭で使用できる対応するコンポーネントを確認できます（各コンポーネントの詳細使用方法は コンポーネントドキュメント を参照）。以下に示します：

  • 大ロゴ- 静的文言、テキスト コンポーネントを使用；
  • タスク入力フィールド- 新規タスクの内容を入力する用、入力フィールド コンポーネントを使用；
  • タスク状態コントローラー- 所属タスクの完了状態を制御する用、ラジオボタン コンポーネントを使用；
  • タスク内容表示- 所属タスクの具体的な内容を表示する用、テキスト コンポーネントを使用；
  • タスク操作項目- 所属タスクを削除する用、ボタン コンポーネントを使用（図ではアイコンを使用しているが、より良い意味の表現のため、ボタンコンポーネントを選択）；
  • 未完了タスク数表示- 未完了のタスク総数を表示する用、テキスト コンポーネントを使用；
  • タスク状態フィルター- 異なる状態のタスクリストをフィルターする用、ラジオボタン コンポーネントを使用；
  • 完了状態のすべてのタスクをクリア- 完了したすべてのタスクをクリアする用、ボタン コンポーネントを使用；
  • ツール紹介- Todosの基本情報を紹介し、静的表示、テキスト コンポーネントを使用；

各部分で使用するコンポーネントを確認したので、ドラッグアンドドロップおよび基本的なコンポーネント属性設定を通じて、単純なページを構築できます。効果は以下の通りで、開発者は デモサンプル にアクセスして表示効果を確認し、デザイナー を通じて詳細設定を確認できます：

ロジック実装——TodoMVCに面白い魂を与える​

前のステップでTodoMVCの基本UI構築を完了しました。これは骨組みを完成させたに過ぎません。次に、魂を与える必要があります。これこそが最も重要なステップです。その前に、TodoMVCに大まかにどのような機能があるかを分析しましょう：

  • タスク作成- ユーザーがタスク入力フィールドにタスク内容を入力し、エンターキーを押すと、タスクリストに未完了タスクが1件作成される；
  • 状態更新- ユーザーがタスクコントローラーをクリックして、現在のタスク完了状態を変更する（既に完了している場合、タスク文言には横線が引かれる）；
  • タスク内容編集- ユーザーがタスク 編集 ボタンをクリックし、タスク内容入力フィールドを呼び出し、内容変更を行い、エンターキーを押して送信する（公式のTodoMVCはダブルクリック方式で編集状態に切り替えるが、宜搭はダブルクリックイベントを未開放のため、ボタン方式で編集状態切り替えを行う）；
  • タスク削除- ユーザーが 削除 ボタンをクリックし、指定の未完了タスクを削除する；
  • 未完了数統計- ページ左下に現在の未完了のタスク数を統計表示；
  • 状態によるフィルター- ユーザーがページ下部のフィルターを切り替えて、異なるタスクリストを表示する：
    • All - すべてのタスクリストを表示；
    • Active - 未完了のタスクリストを表示；
    • Completed - 完了したタスクリストを表示；
  • 完了状態のタスクをクリア- ユーザーがページ右下の 完了をクリア ボタンをクリックして、すべての完了済みタスクを一括削除する；

基本機能は整理完了したので、1ステップずつTodoMVCの基本機能を実装していきましょう。最終効果は デモサンプル を参照、デザイナー で具体的な実装を確認、表示効果は以下の通りです：

ステップ1：ページグローバル変数の作成​

宜搭の設計思想はReactと同様にMVVMモードのため、機能開発の前にページで使用するデータモデル、つまりグローバル状態（具体的使用方法は ページ状態ドキュメント 参照）を定義する必要があります。以下のグローバル変数を定義します：

  • todoList（配列型） - リスト内のすべてのタスク情報を記録、構造は以下の通り：
{
  todoList: [
    {
      id: 1, // タスクのユニークID
      content: 'XXXX', // タスク内容
      done: false, // タスク完了状態
    },
  ];
}
  • editRowId（数値型）- 現在編集状態のタスクIDをマーク（編集状態の際、タスク内容領域は入力フィールドになり、ユーザーの内容変更を行う）デフォルトは未入力；
  • mode（文字列型）- タスクリストの現在のフィルター状態値、選択肢：All、Active、Completed、デフォルト："All"；補足：引用符が必要。
  • newId（数値型）- 新ID生成識別、新しいタスクを作成するたびに、この newId を新しいタスクIDとして使用し、newId は自動的に1加算されるため、すべてのタスクIDのユニーク性を保証する；

ステップ2：タスク作成機能の実装​

これで最初の機能を実装できます。このステップでは、ユーザーが入力フィールドにタスク内容を入力し、エンターキーを押してタスクを作成します（イベントバインディング使用方法は イベント処理ドキュメント 参照）。

上図に示すように、このステップでは主に3つのことを行います：

  • 入力フィールドにユニーク識別子（"input"）を追加し、入力フィールドの入力内容を取得しやすくする；
  • 入力フィールドにonKeyDownイベント（"onRowAdd"）をバインドし、ユーザーがキーボードを押したときに処理をトリガーする；
  • onRowAdd メソッドを実装し、ユーザーがエンターキーを押した場合、todoListの最上部に新しいタスクデータを挿入する；

具体的な実装コードは以下の通り：

export function onRowAdd(e) {
  // エンターキーのみ処理、エンターキーでない場合は直接返却
  if (e.keyCode !== 13) return;
  const { todoList, newId } = this.state; // グローバル変数から現在のタスクリストデータとnewId識別を取得
  this.setState({
    todoList: [
      {
        id: newId,
        done: false,
        content: this.$('input').getValue(), // 入力フィールドのユーザー入力内容を取得
      },
      ...todoList,
    ], // todoListデータを更新、1レコード追加、idはnewId、状態は未完了、内容は入力フィールドのユーザー入力内容
    newId: newId + 1, // newIdを更新し、次回タスク作成で使用
  });
  this.$('input').setValue(''); // 入力フィールドのユーザー入力内容をクリア
}

ステップ3：タスクリストのループ表示実装​

前ステップで、ユーザー入力内容をタスクとして生成し、グローバル変数todoListに追加できるようになりました。次に、入力フィールドの下にタスクリストを表示する必要があります。このステップでは ループレンダリング の関連知識を使用します。

  • まず、タスク情報の外側コンテナコンポーネントを選択し、高度な属性で変数バインディング方式を使用してstate.todoListをコンテナのループデータにバインドする；

  • 次に、タスクの完了状態と内容をループデータの対応するデータフィールドにバインドする必要があります。ループレンダリングでは、開発者は item で現在の行のデータを取得できます。以下に示します：

    • ラジオボタンコンポーネントのデフォルト値属性にタスク状態をバインド；

    • テキストコンポーネントの内容属性にタスク内容をバインド；

このステップを完了後、プレビューすることで以下の効果を得ることができます：

ステップ4：タスク更新&削除の実装​

前ステップで、基本的なtodoListの追加と表示機能を実現しました。次に、タスクの更新と削除機能を実装する必要があります。

タスク内容の多態表示の実装​

TodoMVCの機能を分析すると、タスクリスト内のタスク内容には3種類の異なる表示形態があることがわかります：

異なる表示効果を実現するため、3つのコンポーネント（2つのテキストコンポーネント+1つの入力フィールドコンポーネント）を使用し、条件レンダリング をバインドしてレンダリング属性を切り替える：

以下は3つのコンポーネントのレンダリング変数バインディング値です：

  • 編集状態- グローバル変数editRowIdと現在行のIDが一致する場合に表示： state.editRowId === this.item.id
  • 未完了状態- 現在のタスクが編集状態ではなく、状態が未完了の場合に表示： state.editRowId !== this.item.id && !this.item.done
  • 完了状態- 現在のタスクが編集状態ではなく、状態が完了の場合に表示： state.editRowId !== this.item.id && this.item.done

タスク内容編集の実装​

このステップでは、ユーザーがタスク操作バーの 編集 ボタンをクリックすると、タスクが編集状態に切り替わり、既存内容を基に2回編集可能になり、エンターキーを押して編集内容を送信し、タスクが以前の表示状態に戻る効果を実現します。 この機能を実現するためには、2ステップに分けて実施します：

  • EditボタンにonClickイベント（"onEdit"）をバインドし、ユーザーが Edit ボタンをクリックした際、現在のタスクIDをグローバル変数RowEditIdに設定し、再レンダリングをトリガーしてタスク状態を編集状態に切り替えます。以下に示します：

onEditコードは以下の通りです：

export function onEdit() {
  this.setState({
    editRowId: this.item.id,
  });
}
  • タスク編集状態の入力フィールドコンポーネントにユニーク識別子（"rowInput"）を設定し、タスク作成の実装ロジックを参考にして、onKeyDownイベント（"onRowEdit"）をバインドし、todoList内現在タスクの内容を更新します。以下に示します：

onRowEditコードは以下の通りです：

export function onRowEdit(e) {
  // エンターキーのみ処理、エンターキーでない場合は直接返却
  if (e.keyCode !== 13) return;
  this.setState({
    todoList: this.state.todoList.map((item) => {
      if (item.id === this.item.id) {
        // todoListから現在の編集タスクを検索し、その内容を更新
        return {
          ...item,
          content: this.$('rowInput').getValue(),
        };
      }
      return item;
    }),
    editRowId: 0, // editRowIdをリセットし、現在のタスクを以前の表示状態に戻す
  });
}

補足：タスクの内容編集は既存内容を基に行われるため、変数方式で入力フィールドのデフォルト値を item.content に設定する必要があります。

タスク完了状態切り替えの実装​

ユーザーがタスクの先頭にあるラジオボタンをクリックした際、タスク完了状態を切り替えられるようにするため、ラジオコンポーネントの onChange イベント（"onTodoCheck"）を監視し、ラジオボックス状態変更時に todoList 内タスク状態をリアルタイムで変更する必要があります：

onTodoCheckのコードは以下の通りです：

export function onTodoCheck({ value }) {
  this.setState({
    todoList: this.state.todoList.map((item) => {
      if (item.id === this.item.id) {
        // todoListから現在の編集タスクを検索し、その状態を更新
        return {
          ...item,
          done: value === 'done',
        };
      }
      return item;
    }),
    editRowId: 0,
  });
}

タスク削除の実装​

ユーザーがタスク操作項目の 削除 ボタンをクリックした際、タスクリストから該当タスクを削除できるようにするため、このステップは比較的単純で、DeleteボタンのonClickイベント（"onDelete"）をバインドし、該当タスクをtodoListから削除するだけです：

onDeleteコードは以下の通りです：

export function onDelete() {
  this.setState({
    todoList: this.state.todoList.filter((item) => {
      // todoListから現在のタスクを除外
      return item.id !== this.item.id;
    }),
  });
}

ステップ5：未完了タスク統計表示の実装​

todoMVCページでは、左下に統計情報を表示し、現在のタスクリスト内未完了タスク数を統計します。この機能は比較的単純で、テキストコンポーネントに変数をバインドし、各レンダリング時にtodoList内でdone状態がfalseの数を計算して表示すればよいです。以下に示します：

getleftCountコードは以下の通りです：

export function getleftCount() {
  const { todoList } = this.state;
  return todoList.filter((item) => !item.done).length;
}

ステップ6：タスク状態によるフィルター実装​

このステップでは、タスクリストの状態フィルター機能を実装します。ユーザーが下部の状態フィルターをクリックした際、異なる状態のタスクリストをフィルターします。この機能は2ステップで実装します：

  • ラジオコンポーネントのonChangeイベント（"onModeChange"）を監視し、ユーザーがフィルターをクリック変更した際、グローバル変数modeの値を更新します：

onModeChangeコードは以下の通りです：

export function onModeChange({ value }) {
  this.setState({
    mode: value,
  });
}
  • ステップ3でタスクリストにバインドしたループデータを覚えていますか？このステップではタスクリストのループデータを再バインドし、以前の state.todoList を getShowList() に変更し、現在のフィルター値に応じて条件に合うタスクリストを返すようにします：

getShowListコードは以下の通りです：

export function getShowList() {
  const { mode, todoList = [] } = this.state;
  if (mode === 'Active') {
    // フィルター項目がActiveの場合、すべての未完了タスクリストを返す
    return todoList.filter((item) => !item.done);
  } else if (mode === 'Completed') {
    // フィルター項目がCompletedの場合、すべての完了タスクリストを返す
    return todoList.filter((item) => item.done);
  }
  return todoList; // デフォルトですべてのタスクリストを返す
}

ステップ7：完了状態タスクのクリア実装​

このステップは比較的単純で、ステップ4のタスク削除のバッチ操作です。ユーザーが 完了をクリア ボタンをクリックした際、タスクリスト内の完了状態のタスクをクリアします。Clear CompletedボタンのonClickイベント（"onClearCompleted"）を監視し、ユーザーがボタンをクリックした際、todoList内のすべての完了タスクをクリアするだけです：

onClearCompletedコードは以下の通りです：

export function onClearCompleted() {
  this.setState({
    todoList: this.state.todoList.filter((item) => !item.done), // すべての未完了タスクをフィルターして除外
  });
}

ステップ8：ローカルストレージの実装​

上記の実装により、基本的なtodoMVCのコア機能を実現しましたが、現在のデータはstateに保存されているため、毎回リロードで消去されます。そのため、ユーザーのtodoListを保存して、次回アクセス時に表示できるようにする必要があります。localStorageを使用してローカルストレージを選択したため、以下の2つのメソッドを実装しました：

  • saveTodoData - state内のtodoListとnewIdをlocalStorageに保存；
export function saveTodoData() {
  const { todoList, newId } = this.state;
  // localStorageをサポートしているか判断、サポートしている場合現在のstateデータを保存
  if (window.localStorage) {
    // localStorageでデータを保存
    window.localStorage.setItem('todoMVC', JSON.stringify({ todoList, newId }));
  }
}
  • getTodoData - localeStorageからデータを取得；
export function getTodoData() {
  if (window.localStorage) {
    // localStorageの保存データを取得
    const data = window.localStorage.getItem('todoMVC');
    // ローカル保存データがあるか判断
    if (data) {
      return JSON.parse(data);
    }
  }
  return {};
}

上記2つの基本メソッドがあれば、以下2つのことを行うだけで済みます：

  • didMountライフサイクルでgetTodoData APIを呼び出してローカルデータを取得し、stateの状態を更新；
  • 上記すべてのtodoListを変更する setState 文の下に this.saveTodoData() 呼び出しを追加；

具体的には以下の通り：

スタイルの完成——TodoMVCに美しい外観を与える​

前ステップでTodoMVCの基本機能実装を完了しましたが、第一印象は醜いです。良い外観は製品にとって最も重要ではありませんが、良い外観がない製品は決して良い製品ではありません。宜搭はカスタムスタイル機能を提供しており、スタイルカスタマイズドキュメント を参照してください。スタイルをカスタマイズすることで、以下の効果を得られます（ユーザーは サンプルページ にアクセスして試用、デザイナー を通じて具体的な実装を確認できます）：

この部分では、スタイルカスタマイズの細かい点は詳しく説明せず、代表的なスタイルカスタマイズ事例を挙げるのみです：

  • スタイルパネルでコンポーネントスタイルをカスタマイズ - 例：TodoListの大ロゴ、スタイルパネルでフォントスタイルを設定して実現できます。以下に示します：

  • CSSでコンポーネントスタイルをカスタマイズ - スタイルパネルのカバー範囲は限定的です。宜搭はCSSを記述してコンポーネントスタイルをカスタマイズする機能を提供しています。パネル下部の層効果はbefore疑似要素方式で実装しました：

データソース接続——TodoMVCに強力な装備を与える​

前ステップまでで、公式のTodoMVCの基本機能は実装完了しましたが、注意深い開発者が気付くのは、この製品機能は使用可能ですが、別のブラウザでアクセスするとタスクデータが失われてしまうことです。これはデリバリー可能なTodoList機能ではありません。宜搭は基本的なUIとフロントエンドロジックカスタマイズ機能を提供するだけでなく、強力なデータ機能も提供しています。今、TodoMVCに強力な装備を与え、データの永続的保存を実現しましょう。最終的に得られる効果は以下の通りです：

注意

宜搭OpenAPIの呼び出しには認証が必要なため、ページをログイン不要ページとして設定できず、皆様に試用いただくことができません。ただし、開発者の方は デザイナー にアクセスしてページの具体的な実装を確認できます。

ステップ1：通常フォームの作成、タスクデータ保存構造の構築​

まず、現在のアプリケーション下で通常フォームを作成し、タスク情報を保存します。通常フォーム作成の具体的な方法は 宜搭使用ドキュメント を参照し、ここでは詳細は説明しません。以下に示します：

フォーム作成完了後、FormUuidを得ます。これはこのフォームのユニーク識別子で、上図の赤枠に示す通りです。

ステップ2：リモートAPIの使用、タスクのCRUD実装​

タスクデータを保存する場所があるため、TodoMVCで非同期APIを作成し、タスクのCRUDを実現する必要があります。宜搭デザイナーはリモートAPI構成を提供し、リモートhttpインターフェースをリクエストできます（リモートAPIドキュメント 参照）。また、宜搭はよく使われるOpenAPIインターフェースを提供し、データの基本操作を実現できます（OpenAPIドキュメント 参照）。ページ構築で以下のリモートAPI構成を作成します：

todoList​

タスクリストデータを取得、具体的な構成は以下の通り：

  • 自動読み込みスイッチをオン、つまりページ進入時に自動的にこのインターフェースを読み込み、宜搭は自動的にインターフェースの戻り内容を state.todoList にマウントします；
  • OpenAPIドキュメントの形式に従ってリクエストリンクとリクエスト方法を構成；
  • リクエストパラメータを構成
    • formUuid- タスク情報を保存するフォームのユニーク識別子、つまり前ステップで作成したフォームのformUuid；
    • currentPage- 現在のページ番号、宜搭のオープンインターフェースはページ分割をサポートしているため、ここではデモ表示に重点を置き、ページ分割処理はせず、パラメータを固定で1に設定し、1ページ目データを取得；
    • pageSize- 1ページあたりの数量、宜搭オープンインターフェースのデフォルト1ページあたり数量は10ですが、より良いデモ体験のため、パラメータを固定で50に設定し、近い50件のデータを取得；
  • didFetch処理関数を構成し、オープンインターフェースの構造を上記ロジック実装部で識別できるデータ構造に変換、具体的な実装は以下の通り：
function didFetch(content) {
  return (content.data || []).map((item) => {
    return {
      id: item.formInstId, // フォームデータのインスタンスID、つまり各行データのユニーク識別子
      content: item.formData.textField_kymq5pdi, // タスク内容情報、textField_kymq5pdi はタスクフォーム内タスク内容コントロールのユニーク識別子
      done: item.formData.radioField_kymq5pdj === '完了', // タスク状態、新規タスクはデフォルト未完了状態、radioField_kymq5pdj はタスクフォーム内タスク状態コントロールのユニーク識別子
    };
  });
}

add​

タスク作成用、具体的な構成は以下の通り：

  • OpenAPIドキュメントの形式に従ってリクエストリンクとリクエスト方法を構成；
  • リクエストパラメータを構成
    • formUuid- 上記と同様；
    • appType- 現在のアプリケーションのアプリケーションID（APP_で始まり、現在のページURLアドレスから取得可能）；
  • willFetch処理関数を構成、OpenAPIのパラメータ形式に従ってタスク情報を宜搭が識別できる形式に変換する必要があります、具体的な実装は以下の通り：
function willFetch(vars, config) {
  const { content } = vars.data; // 新規タスクの内容情報を取得
  vars.data.formDataJson = JSON.stringify({
    // 新規フォームインスタンスはstringifyでパラメータ処理し、formDataJsonフィールドに配置
    textField_kymq5pdi: content, // タスク内容情報、textField_kymq5pdi はタスクフォーム内タスク内容コントロールのユニーク識別子
    radioField_kymq5pdj: '未完了', // タスク状態、新規タスクはデフォルト未完了状態、radioField_kymq5pdj はタスクフォーム内タスク状態コントロールのユニーク識別子
  });
}
  • didFetch処理関数を構成、作成インターフェースリクエスト成功時にポップアップで操作成功を通知し、タスクリストを更新、具体的な実装は以下の通り：
function didFetch(content) {
  this.utils.toast({
    // 操作成功を通知
    title: 'Add Success!',
  });
  this.reloadDataSource(); // 最初のリクエスト（つまりtodoListインターフェース）を再リクエストし、タスクリストを更新
  return content; // 重要、contentを返却する必要があります
}

del​

タスク削除用、相対的に単純、具体的な構成は以下の通り：

ただし注意点が2つあります：

  • 削除タスクのタスクIDは固定ではなく、dataSourceMap.del.load API を呼び出す際、具体的に削除するタスクIDを渡す必要があります；
  • 削除タスクにdidFetchを実装しないのは、Clear Completedを実装する際この非同期APIをバッチ呼び出しするため、非同期リクエストの手動呼び出しのthenメソッド内でdidFetchのロジックを実装する必要があるためです；

update​

タスク更新用、具体的な構成は以下の通り：

  • OpenAPIドキュメントの形式に従ってリクエストリンクとリクエスト方法を構成；
  • willFetch処理関数を構成、add構成と同様、タスク内容を宜搭が識別できるデータ構造に変換する必要があります、具体的な実装は以下の通り：
function willFetch(vars, config) {
  const { id, content, done } = vars.data;
  vars.data.formInstId = id; // タスクID、タスクのユニーク識別子
  const data = {};
  if (content) {
    // content情報を変更する必要がある場合、このパラメータを連結
    data.textField_kymq5pdi = content;
  }
  if (typeof done === 'boolean') {
    // 状態情報を変更する場合、このパラメータを連結
    data.radioField_kymq5pdj = done ? '完了' : '未完了';
  }
  vars.data.updateFormDataJson = JSON.stringify(data);
}
  • didFetch処理関数を構成、addと同様に成功通知+リスト更新、具体的な実装は以下の通り：
function didFetch(content) {
  this.utils.toast({
    title: 'Update Success!',
  });
  this.reloadDataSource();
  return content; // 重要、contentを返却する必要があります
}
注意

リモートAPI構成を追加する一方で、以前設定した以下のグローバル変数を削除しました：

  • todoList- 現在リストはリモートAPIで取得するため、stateにtotoList情報を保存する必要がなくなった；
  • newId- 各タスク作成時、宜搭は自動的にユニークなformInstIdを生成するため、タスクID生成を行う必要がなくなった；

ステップ3：リモートAPI呼び出しによる既存データ管理ロジックの置換​

前ステップのリモートAPI設定を完了したため、以前のロジック実装部分の一部を変更するだけで済みます。グローバル変数操作ロジックをリモートAPI呼び出しに置き換えます。具体的な変更点は以下の通り：

  • onRowAdd 実装を変更し、addリモートAPIを呼び出してタスク作成、具体的な実装は以下の通り：
export function onRowAdd(e) {
  // エンターキーのみ処理
  if (e.keyCode !== 13) return;
  this.dataSourceMap.add.load({
    // リモートAPIを呼び出す
    content: this.$('input').getValue(),
  });
}
  • onDelete 実装を変更し、delリモートAPIを呼び出してタスク削除、具体的な実装は以下の通り：
export function onDelete() {
  this.dataSourceMap.del
    .load({
      // リモートAPIを呼び出す
      formInstId: this.item.id, // 動的パラメータを渡す
    })
    .then((res) => {
      // リモートAPIコールバック処理、構成内のdidFetchに類似
      this.utils.toast({
        // 成功通知
        title: 'Delete Success!',
      });
      this.reloadDataSource(); // タスクリストを更新
    });
}
  • onRuleEdit 実装を変更し、updateリモートAPIを呼び出してタスク内容更新、具体的な実装は以下の通り：
export function onRowEdit(e) {
  // エンターキーのみ処理
  if (e.keyCode !== 13) return;

  this.dataSourceMap.update.load({
    id: this.item.id,
    content: this.$('rowInput').getValue(),
  });
  this.setState({
    editRowId: 0,
  });
}
  • onTodoCheck 実装を変更し、updateリモートAPIを呼び出してタスク状態更新、具体的な実装は以下の通り：
export function onTodoCheck({ value }) {
  this.dataSourceMap.update.load({
    id: this.item.id,
    done: value === 'done',
  });
  this.setState({
    editRowId: 0,
  });
}
  • onClearCompleted 実装を変更し、delリモートAPIをバッチ呼び出して完了タスクをクリア、具体的な実装は以下の通り：
export function onClearCompleted() {
  const deleteItems = this.state.todoList.filter((item) => item.done); // 削除対象タスクリストをフィルター
  Promise.all(
    deleteItems.map((item) =>
      this.dataSourceMap.del.load({
        // Promise.allでdelリモートインターフェースをバッチ呼び出ししてタスク削除
        formInstId: item.id,
      })
    )
  ).then((res) => {
    // Promise.allコールバック処理
    this.utils.toast({
      // 成功通知
      title: 'Clear Success!',
    });
    this.reloadDataSource(); // タスクリストを更新
  });
}

オンラインで試用​

サンプル体験センター|TodoMVC

まとめ​

このチュートリアルはゼロから一歩ずつ開発者を導き、TodoMVCカスタムページの構築を完成させます。構築プロセスでは、宜搭カスタムページのほぼすべての常用知識が含まれており、この例を通じて皆様の宜搭使用スキルを一段階引き上げ、より複雑なビジネスサポートシナリオを実現できることを願っています。何かご質問がありましたら、いつでもフィードバックをお願いします。

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited