Question

我有以下代码

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属性，以便x-view-container呈现x-card而不是当前呈现的x-search。我会特别感兴趣的是如何从我的事件处理程序的相对位置，如何以绝对的方式做到这一点，以及如何以任何其他方式这样做。

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

Answer 1

您可以使用query()方法查询DOM上的元素。最简单的例子是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.
}

如何在Dart的web_ui中构建“控制器”？

1 个答案: