飞镖模板可以处理递归混合结构吗？答案

【问题标题】：Can dart templating handle recursive mixed structures?飞镖模板可以处理递归混合结构吗？
【发布时间】：2023-04-06 17:11:01
【问题描述】：

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

假设我正在尝试对具有框架和段落的树进行建模。一个框架可以包含段落和其他框架（递归）。（注意：这些框架不是 iframe，只是一个真正容纳内容的框。）

Frame
   Paragraph
   Frame
      Paragraph
      Paragraph
      Frame
         Paragraph
    Paragraph
    ...

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

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

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

【问题讨论】：

标签： recursion dart dart-webui

【解决方案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 中显示为 <div is="x-frame">

【讨论】：

content select="div[is=x-frame], p" 是怎么回事？我在 WebUI 的（非常非常稀疏的）文档中找不到这个。
@Pixel 所以使用这种方法必须生成
Hello There!
内容 - 是否有另一种方法可以对树进行建模（即每个对象有一个父级和一个子级列表），您可以动态生成该内容吗？正在考虑可能有类似 template iterate 的东西，它也可以有条件地切换显示的内容。
@DrColossos 内容标签指定 HTML 可以在该点插入到组件中。 Select 使用 CSS 选择器来指定允许插入的 HTML 标记。在我的示例中，只有p 标签和is 属性为x-frame 的div 标签可以插入到组件中。
@gremwell 好吧，您可以将此方法与模板迭代结合起来，并可能实现您想要的。
@PixelElephant 感谢您的提醒。非常整洁。