1

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

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

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

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

4

2 回答 2

1

DivElement 只是 DOM div 元素的包装器，因此您不能直接扩展它。然而，新的网络技术正在很好地帮助您解决这个问题。查看 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 组件的精彩视频。

于 2012-10-26T16:15:54.260 回答