Question

如何在Dart中创建复合组件？

我想创建一些带有结构化输入字段的业务表单：标签，输入文本，字段特定错误消息的位置？所有表单都将使用数据驱动方法创建，因此需要以编程方式完成。

是否像继承DivElement一样简单，然后添加应用了某些样式的组件？

我一直在使用dart编辑器尝试构建一些可以执行此操作的类，但运气不佳。所有样本都非常独特，与商业数据输入等无关。

Answer 1

不幸的是，你不能从DOM子类化元素。（这不是Dart问题，而是一般的Web开发问题。）然而，正在构建一个名为“Web组件”的新系统来解决这个（和其他）问题。

Dart支持Web组件，您可以将Web组件编译为vanilla 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>自定义标记，它是您在第一个示例中构建的自定义组件。

多田！定制和复合元素！：）

open source Dart + Web Components project可用。还可以使用running example of TODOMVC with Dart + Web Components。观看great video on Web Components。

Answer 2