仅在实例化 Web 组件时如何初始化 html 属性答案

【问题标题】：How to initialize html attributes only when instantiating a web component仅在实例化 Web 组件时如何初始化 html 属性
【发布时间】：2013-06-16 02:47:25
【问题描述】：

假设您有一个自定义组件容器。该组件将查看其中的任何 html 元素并根据自定义做出决定这些元素的 html 属性。例如，假设有一个 proportion 属性可以使用如下：

<x-container>
  <div proportion="0.2">
  ...
  </div>
  <div proportion="0.5">
  ...
  </div>
  <div proportion="0.3">
  ...
  </div>
</x-container>

暂时忘记飞镖是一件合理的事情 html属性还是滥用？（注：我正在学习 Dart 和 Web UI 作为我第一次尝试 Web 开发 - 所以这可能是一个坏的想法）。

如果合理的话，我想嵌套容器：

<x-container>
  <x-container proportion="0.3">
  ...
  </x-container>
  <x-container proportion="0.3">
  ...
  </x-container>
  <div proportion="0.4">
  ...
  </div>
<x-container>

一般容器组件本身没有或不需要 proportion 成员变量，只有它们包含的 html 元素可以有 proportion html 属性。但是由于容器可以是包含的元素我希望它能够拥有这样的 html 属性。如何在实例化中设置 html 属性没有尝试调用 dart 方法 ("proportion=") 的组件一个不存在也不应该存在的成员变量？

从答案 How to pass a constant or literal data via an attribute while instantiating dart web component? 看起来建议是 attribute=value，但是这会尝试设置一个不存在的成员变量。

【问题讨论】：

我不确定我是否理解，为什么你的x-container 不能带有用于逻辑的proportion 实例字段？
我可以 - 但似乎不正确。在这种情况下，作为容器的作者，我知道比例。但是假设在我的容器内部，我正在使用另一个名为 weather_summary 的小部件，该小部件由其他没有 proportion 概念的开发人员编写。同样的问题也成立。我不知道这样使用 html 属性是否是一种滥用。如果没有，似乎没有理由不允许在组件实例化时设置 html 属性。最终，内容提供者可以使用 html 属性将信息盲目地传递给组件的容器，而不是组件本身。
现在我明白了。将x-weather-summary 包裹在x-container 中，其中包含proportion。这是我知道的唯一方法。在 WPF/XAML 中，这种东西可以写成<Label Grid.Row="0">，这很好，但是我们在 Web UI 中没有那种打点能力。也许为 Web UI 项目提交一个错误并提出意见。
谢谢。 x-container 代码遍历子项以查找 html 属性 proportion。 x-container 不需要自己的proportion。如果它有 5 个孩子，每个孩子通过他们的 proportion html 属性请求 20% 的区域，那么它可以使用 他们的 来布局。 Web UI 由代码生成驱动。有一组 allowed 属性（name、extends、constructor、apply-author-styles ）。其他人在组件上生成对 setter 的调用，如果它不存在，则会发生错误。为什么不，而不是错误，如果 setter 存在调用它，如果没有设置 html 属性。有用吗？

标签： dart dart-webui

【解决方案1】：

如果您能够将您的需求转换为 css 而不是比例属性，则您可以使用以下方法完成您想要的操作。

在我的组件中，我给组件传入了一个视图对象，该视图对象具有style属性，该属性是根据分配给视图对象的值动态生成的；

在下面的部分示例中，在我的组件 dart 代码中，我使用在运行时传递的视图对象来计算样式和类属性。

  CardView view;
  String get cardClass => 'piece ${view.type} card classic clickable';
  Map get cardStyle => view.styles;

在我的 html 代码中，我指的是如图所示的那些 getter；

<element name="x-playing-card" constructor="PlayingCardComponent" extends="div">
  <template>
      <div class="{{cardClass}}"  on-click="select()"
        style="{{cardStyle}}">
      </div> 
  </template>
  <script type="application/dart" src="xplayingcard.dart"></script>
</element>

以类似的方式，我认为您可以完成与比例属性相同的操作，但使用 css。

【讨论】：

谢谢 - 也许我不明白。元素的 html 属性集实际上是一个字典。一些键被采用（即标准化：id、style、title、...）其他键不被采用（proportion、我的数据、...）。在实例化 客户端可以在该映射中添加内容，以便app 可以看到它。在此示例中，您将数据 cardClass 从代码传递到 html 属性 class。我认为有用，但用例不同。

【解决方案2】：

原来是有一个bug，阻止设置html属性。

展望未来：

当修复发布时，我们将能够设置 html 属性而无需绑定它们。此外，将有一个新的要求来指定要绑定哪些实例化属性。在 html 实例化中指定但未在组件元素定义的 attributes=... 中指定的任何属性都将作为组件的 html 属性传递。此外，一般来说，当将数据从 html 实例化传递到 html 属性时（通过不将它们添加到 attributes=...），最好将它们命名为 data-some-unique-prefix-*然后可以通过组件的数据集映射访问它们。

讨论：https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/KYF6pbVk8J0

这些功能正在积极开发中，敬请期待。

【讨论】：