1

Dart で複合コンポーネントを作成する方法

構造化された入力フィールドを持つビジネス フォームを作成したい: ラベル、入力テキスト、フィールド固有のエラー メッセージの場所。すべてのフォームはデータ駆動型のアプローチを使用して作成されるため、プログラムで行う必要があります。

DivElement をサブクラス化し、いくつかのスタイルを適用してそれらのコンポーネントを追加するのと同じくらい簡単ですか?

私は dart エディターを使用して、これを行ういくつかのクラスを作成しようとしましたが、うまくいきませんでした。すべてのサンプルは非常にユニークで、ビジネス データ入力などとはあまり関係がありません。

4

2 に答える 2

1

DivElement は DOM div 要素の単なるラッパーであるため、直接拡張することはできません。ただし、この問題を解決するために、新しい Web 技術が順調に登場しています。Dart のWeb コンポーネント ライブラリを確認してください。この機能を提供するコミュニティ UI ライブラリもいくつかあります。ここで見つけることができます。

于 2012-10-22T01:22:06.963 に答える
0

残念ながら、DOM から要素をサブクラス化することはできません...まだです。(これは Dart の問題ではなく、一般的な Web 開発の問題です。) ただし、この (およびその他の) 問題に対処するために、「Web コンポーネント」と呼ばれる新しいシステムが構築されています。

Dart は Web コンポーネントをサポートしており、Web コンポーネントを標準の HTML/JavaScript/CSS にコンパイルして、最新のブラウザーで実行できます。Web コンポーネントを使用して、スタイル、構造、および動作をカプセル化できます。これにより、求めている基本的なネスティング/合成が得られます。

ビヘイビアーのあるフォームのコンポーネントの例を次に示します。

<!DOCTYPE html>
<!--
Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<body>
<element name="x-todo-form" extends="div" constructor="FormComponent"
         apply-author-styles>
  <template>
    <!-- Note: <form> is to make "enter" work on Opera/IE. -->
    <form data-action="submit:addTodo">
      <input id="new-todo" placeholder="What needs to be done?" autofocus
             data-action="change:addTodo">
    </form>
  </template>
  <script type="application/dart">
  import 'model.dart';
  import 'package:web_components/web_component.dart';

  class FormComponent extends WebComponent {
    void addTodo(e) {
      e.preventDefault(); // don't submit the form
      if (_newTodo.value == '') return;
      app.todos.add(new Todo(_newTodo.value));
      _newTodo.value = '';
    }
  }
  </script>
</element>
</body>
</html>

このカスタム要素を次のように使用します。

<!DOCTYPE html>
<!--
Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="components" href="newform.html">
  <title>dart - TodoMVC</title>
</head>
<body>
  <section id="todoapp">
    <header id="header">
      <h1 class='title'>todos</h1>
      <x-todo-form></x-todo-form>
    </header>

コンポーネントをプル<link>するセクション内のタグに注意してください。次に、カスタム タグに<head>注意してください。これは、最初の例で作成したカスタム コンポーネントです。<x-todo-form>

多田！カスタム要素と複合要素！:)

オープンソースのDart + Web Components プロジェクトが利用可能です。Dart + Web コンポーネントを使用した TODOMVCの実行例も利用できます。Web Components に関するすばらしいビデオをご覧ください。

于 2012-10-26T16:15:54.260 に答える