Question

我正在开发我的第一个＆＃34;复合体＆＃34; Dart上的应用程序和我在如何使用多个视图时遇到了一些麻烦（我想开发应用程序以在单个页面中运行）。

首先，我假设这（使用Polymer）是使用应用程序的各种视图（或＃34; app屏幕＆＃34;）的正确方法。但是，如果不是，我想知道（当然）。通过＆＃34; app屏幕＆＃34;，我说的是用Java创建各种表单。

因此，例如，我在页面顶部有两个按钮。单击第一个时，它会显示带有用户注册区域的视图。单击第二个按钮时，它会显示一个带有可编辑网格的视图。

你能给我一些这个简单应用程序的代码示例吗？

Answer 1

您可以像对任何本机元素一样使用CSS样式属性作为聚合物元素。

您可以这样查询：

Element e = querySelector('my-form');

然后隐藏/显示它：

e.style.display = 'none';
e.style.display = 'block';

在你初始化聚合物后，你可以使用元素的类（如果存在）：

@CustomTag(...)
class MyForm ... {
   ...
}

MyForm e = querySelector('my-form') as MyForm;

然后您可以继续设置类的属性（如果需要）或使用style属性，因为该类继承自HtmlElement。

你也可以使用这个类。 Dart带有一些＆＃34;切换＆＃34;功能性：

element.classes.toggle('hidden');
element.classes.toggle('shown');

问候，罗伯特

Answer 2

您可以使用template if功能这样，当前未激活的视图将自动从DOM中删除，并在模型属性发生更改时自动再次插入。

<polymer-element name='app-element'>
  <template>
    <template if='{{appModel.view == 'view1'}}'>
      <view1></view1>
    </template>

    <template if='{{appModel.view == 'view2'}}'>
      <view2></view2>
    </template>
  </template>
  <script ...>
</polymer-element>

Dart语言：聚合物 - 使用视图

2 个答案: