我有以下代码
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';
}
最佳答案
您可以使用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 - 如何在Dart的web_ui中构造 “Controller”？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15513929/