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

【问题标题】：How do I create composite components in Dart?如何在 Dart 中创建复合组件？
【发布时间】：2012-10-21 21:59:11
【问题描述】：

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

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

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

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

【问题讨论】：

标签： dart

【解决方案1】：

DivElement 只是 DOM div 元素的包装器，因此您不能直接扩展它。然而，新的网络技术正在很好地帮助您解决这个问题。查看 Dart 的web components library。还有一些提供此功能的社区 UI 库。你可以找到他们here。

【讨论】：

约翰，你太谦虚了。一些他如何在 Buckshot 中做到这一点。 :)
是的，我更喜欢在一般问题的情况下对 SO 保持中立。我提供了一些选择。这实际上取决于个人选择他们最熟悉的框架。

【解决方案2】：

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

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>

注意<head> 部分中的<link> 标记，它会拉入组件。然后注意 <x-todo-form> 自定义标签，这是您在第一个示例中构建的自定义组件。

多田！自定义和复合元素！ :)

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

【讨论】：