Question

我是Dart的新手，请原谅我的无知。

让我们说我试图模拟一个有框架和段落的树。一个帧可以保存段落和其他帧（递归）。（注意：这些框架不是iframe，只是一个真正容纳内容的框。）

Frame
   Paragraph
   Frame
      Paragraph
      Paragraph
      Frame
         Paragraph
    Paragraph
    ...

这些树没有规定的结构。只是想知道如何使用dartUI来显示具有这种混合类型的递归树结构。你能通过模板/装订来做到吗？

编辑：此树结构是动态的，并在运行时更改（即用户可以添加框架和段落）。所以我正在寻找的是一种从这个模型生成视图的方法，而不需要调用回服务器来生成新的内容结构。

我在想，也许template iterate可以用来迭代一个Frame的所有子节点，并根据子节点是一个段落还是框架，以某种方式切换插入的元素。

Answer 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 article了解详情。

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

飞镖模板处理递归混合结构？

1 个答案: