0

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

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

暂时忘记 dart 对 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>

一般来说，Container组件本身没有或不需要 proportion成员变量，只有它们包含的html元素可能有proportion html属性。但是由于容器可以是包含的元素，我希望它能够具有这样的 html 属性。如何在组件的实例化中设置 html 属性，而不尝试在不存在且不应该存在的成员变量上调用 dart 方法（“proportion =”）？

来自如何在实例化 dart Web 组件时通过属性传递常量或文字数据的答案 ？ 看起来建议是attribute=value，但这试图设置一个不存在的成员变量。

4

2 回答 2

1

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

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

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

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

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

<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。

于 2013-06-25T18:47:14.967 回答
0

事实证明，有一个错误会阻止设置 html 属性。

往前走：

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

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

这些功能正在积极开发中，因此请期待更改。

于 2013-06-29T16:44:48.827 回答