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 属性，以便x-view-container呈现x-card而不是当前呈现的 .view x-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 回答