0

カスタム コンポーネントコンテナがあるとします。このコンポーネントは、内部のすべての html 要素を調べ、それらの要素のカスタム html 属性に基づいて決定を下します。たとえば、 次のように使用できる比率属性があるとします。

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

一瞬ダーツを忘れるのは、html 属性を扱うのに合理的なことですか、それとも悪用ですか? (注: Web 開発の最初の試みとして、Dart と Web UI を学んでいるので、これは悪い考えかもしれません)。

合理的であれば、コンテナをネストしたいと思います。

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

一般に、コンテナー コンポーネント自体は比例メンバー変数を持っていないか必要とせず 、含まれている html 要素のみが比例html 属性を持つことができます。しかし、コンテナーは含まれる要素になる可能性があるため、そのような html 属性を持つことができるようにしたいと考えています。コンポーネントのインスタンス化で html 属性を設定するには、存在しない、存在すべきではないメンバー変数で dart メソッド ("proportion=") を呼び出そうとせずに、どうすればよいですか?

ダーツ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 に答える