Question

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

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

通常，Container组件本身没有或不需要比例成员变量，只有它们包含的html元素可能拥有比例 html属性。但是因为容器可以是一个包含的元素我希望它能够有这样的HTML 属性。如何在a的实例化中设置html属性没有尝试调用dart方法（“proportion =”）的组件不存在且不存在的成员变量？

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

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

Answer 2

事实证明，存在一个阻止设置html属性的错误。

前进：

我们将能够在修复发布时设置html属性而不绑定它们。此外，还需要指定要绑定的实例化属性。在html实例化中指定但未在组件元素定义的 attributes = ... 中指定的任何属性将作为组件的html属性传递。此外，通常，在将数据从html实例化传递到html属性时（通过不将它们添加到attributes = ...），最佳做法是将它们命名为 data-some-unique-prefix - * 然后可以通过组件的数据集映射访问它们。

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

这些功能正在积极开发中，因此可以依靠变化。

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

2 个答案: