dart模板可以处理递归混合结构

我对Dart完全陌生，请原谅我的无知。

比方说，我试图为一棵有框架和段落的树建模。一个框架可以容纳段落和其他框架（递归）。（注意：这些框架不是iframe，只是一个真正容纳内容的盒子。）

Frame
   Paragraph
   Frame
      Paragraph
      Paragraph
      Frame
         Paragraph
    Paragraph
    ...

这些树没有规定的结构。只是想知道如何使用dartUI来显示这样一个混合类型的递归树结构。你能通过模板/绑定来实现吗？

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

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

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

x框。省道：

<!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">

相关内容

最新更新

热门标签：