0

次のコードがあります

xviewcontainer.html

<!DOCTYPE html>

<html>
  <head>
    <title>xviewcontainer</title>
    <link rel="components" href="xsearch.html">
    <link rel="components" href="xcard.html">
  </head>

  <body>
    <element name="x-view-container" constructor="ViewContainerComponent" extends="div">
      <template>
        <template instantiate="if view == 'SEARCH_VIEW'">
          <x-search></x-search>
        </template>
        <template instantiate="if view == 'CARD_VIEW'">
          <x-card></x-card>
        </template>
      </template>
    </element>
    <script type="application/dart" src="xviewcontainer.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

xviewcontainer.dart

import 'package:web_ui/web_ui.dart';

class ViewContainerComponent extends WebComponent {
  String view = 'SEARCH_VIEW';
}

の現在レンダリングされている他のサブコンポーネント内にイベント処理コードがありますx-search。x-view-container含まれているインスタンスへの参照を取得するにはどうすればよいですか? .view プロパティを変更して、現在レンダリングされている .view プロパティの代わりにx-view-containerレンダリングするようにしたいと考えています。イベントハンドラーの相対位置から行う方法、絶対的な方法で行う方法、および他の方法で行う方法に特に興味があります。x-cardx-search

  void openCardView(){
    WHAT_DO_I_PUT_HERE.view = 'CARD_VIEW';
  }
4

1 に答える 1

2

メソッドを使用して、DOM にある要素を照会できますquery()。最も簡単な例はquery('x-view-container'). または、それにクラスまたは ID を割り当て、それに対してクエリを実行します。次に、プロパティにアクセスしてxtag、実際の Web コンポーネント インスタンスを取得します。

次に例を示します。

import 'package:web_ui/watcher.dart' as watchers;

main() {
  // I'm assuming that the HTML tag is somewhere on the page.
  query('x-view-container').xtag.view = 'CARD_VIEW';

  watchers.dispatch(); // You may need to call this, or use @observable stuff.
}
于 2013-03-20T12:56:15.247 に答える