1

I'm entirely new to Dart so excuse my ignorance.

Lets say I was trying to model a tree which had frames and paragraphs. A frame could hold paragraphs, and other frames (recursive). (Note: These frames are not iframes, just a box to hold content really.)

Frame
   Paragraph
   Frame
      Paragraph
      Paragraph
      Frame
         Paragraph
    Paragraph
    ...

There is no prescribed structure to these trees. Just wondering how one would use dartUI to display a recursive tree structure with mixed types like this. Can you do it via templating/binding?

Edit: This tree structure is dynamic and changed at run time (i.e. users can add frames and paragraphs). So what I'm looking for is a method to generate the view from this model without the calls back to the server to generate new content structures.

I was thinking maybe the template iterate could be used to iterate over all the children of a Frame and somehow switch what element is inserted based on whether the child is a paragraph or frame.

4

1 回答 1

1

您可以使用该<content>标记将任意 HTML 插入到 Web 组件中。您可以使用 CSS 选择器来限制显示在内容区域内的内容。可以容纳其他框架和段落的 Frame 元素示例的完整实现可能如下所示：

x-frame.dart:

<!DOCTYPE html>

<html>
  <body>
    <element name="x-frame" constructor="FrameComponent" extends="div">
      <template>
        <content select="div[is=x-frame], p"></content>
      </template>
      <script type="application/dart">
        import 'package:web_ui/web_ui.dart';

        class FrameComponent extends WebComponent {
        }
      </script>
    </element>
  </body>
</html>

使用嵌套框架：

<x-frame>
  <p>Hello There!</p>
  <x-frame>
    <p>We are nested.</p>
  </x-frame>
  <x-frame>
    <x-frame>
      <p>A third level!</p>
    </x-frame>
  </x-frame>  
</x-frame>

您可以阅读Dart WebUI 文章了解更多信息。

注意：与 div 匹配的内容选择是属性，因为组件标签被转换为该格式（换句话说，即使我们可以通过 来创建框架组件<x-frame>，它们也会在 DOM 中显示为<div is="x-frame">

于 2013-07-08T05:42:45.670 回答