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

【问题标题】：How do I structure a "Controller" in Dart's web_ui?如何在 Dart 的 web_ui 中构建“控制器”？
【发布时间】：2013-03-20 01:54:39
【问题描述】：

我有以下代码

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';
  }

【问题讨论】：

标签： dart dart-webui

【解决方案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.
}

【讨论】：