将 polymer-dart 元素添加到 div

Question

我正在尝试构建一个可以切换其他组件的组件，几乎像页面一样，但在 URL 中没有任何变化。

我有一个包含内容 div:

的聚合物元素

<link rel="import" href="../../packages/polymer/polymer.html">

<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_tabs.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">

<polymer-element name="navigation-toolbar" class="dark-primary-color">
    <template>
        <style type="text/css">
            :host {
                display: block;
            }

        </style>

        <core-scaffold>

            <core-header-panel id="menu-panel" navigation flex>

                <core-toolbar id="navheader">
                    <span>Menu</span>
                </core-toolbar>
                <core-menu>
                    <core-item label="A" on-click="{{aClicked}}"></core-item>
                    <core-item label="B" on-click="{{bClicked}}"></core-item>
                    <core-item label="C" on-click="{{cClicked}}"></core-item>
                </core-menu>
            </core-header-panel>

            <span tool>{{title}}</span>
            <paper-tabs class="main-menu bottom fit" selected="0">
                <paper-tab on-click="{{aClicked}}">A</paper-tab>
                <paper-tab on-click="{{bClicked}}">B</paper-tab>
                <paper-tab on-click="{{cClicked}}">C</paper-tab>
            </paper-tabs>

            <div class="content" forceNarrow>
               <p>Lorem ipsum ...</p>
            </div>
        </core-scaffold>
    </template>
    <script type="application/dart" src="navigation-toolbar.dart"></script>
</polymer-element>

我有一个触发事件和接收事件的事件总线，它在整个应用程序中使用，以允许我分离组件。

part of util;

class EB {

  static EventBus _eventBus = new EventBus();

  static fire(event){
    _eventBus.fire(event);
  }

  static Stream on([Type eventType]) {
    return _eventBus.on(eventType);
  }

}

用于触发/侦听页面事件的 PageEvent 只是一个 PODO：

part of event;

class PageEvent {

  String page;
  String title;
  PolymerElement element;


  PageEvent.create(String page, String title, PolymerElement element){
    this.page = page;
    this.title = title;
    this.element = element;
  }


}

在事件库中，正在为 PageEvent 完成相关导入：

library event;

import 'package:polymer/polymer.dart';

part 'login-event.dart';
part 'logout-event.dart';
part 'page-event.dart';
...

然后在我的核心脚手架组件中使用此事件总线：

import 'package:polymer/polymer.dart';
import 'util/util.dart';
import 'event/event.dart';
import 'page/page.dart';
import 'dart:html';

@CustomTag('navigation-toolbar')
class NavigationToolbar extends PolymerElement {

  @observable String page = "home";
  @observable String title = "Home";

  NavigationToolbar.created() : super.created() {

    EB.on(PageEvent).listen((PageEvent e) {
      this.page = e.page;
      this.title = e.title;
      setPage(e.element);
    });

单击其中一个纸标签会触发一个事件：

 // part of navigation-toolbar
 aClicked(event, detail, target) {
    EB.fire(new PageEvent.create("a", "A", new APage()));
  }

setPage 是最后的魔法应该发生的地方，但不是，div 和 e 都被打印出来，这告诉我它正在进入方法，e 和 div不为空：

 // part of navigation-toolbar
 setPage(PolymerElement e) {

    DivElement div = shadowRoot.querySelector("core-scaffold").querySelector(".content");
    Node node = div.lastChild;
    while (node != null) {
      node.remove();
      node = div.lastChild;
    }

    print(div);
    print(e);

    div.children.add(e);

  }

打印出div，我可以在控制台中看到div这个词，这意味着它不为空，打印出e，我可以看到a-page，b-page，c-page等，这也不为空。

清除 div 的代码有效，它删除了所有内容。不起作用的部分是 div.children.add(e);

APage 看起来像这样：

<link rel="import" href="../../../packages/polymer/polymer.html">

<polymer-element name="home-page" class="dark-primary-color">
    <template>
        <div>
            A Page
        </div>
    </template>
    <script type="application/dart" src="a-page.dart"></script>
</polymer-element>

和一个-page.dart:

part of page;

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

在导航中为 a-page.html 添加导入-toolbar.html

<link rel="import" href="page/a-page.html">

给我以下异常：

'package:falm/page/a-page.dart': error: line 1 pos 6: url expected
part of page;
     ^: package:falm/page/a-page.dart

div.children.add(e); 不起作用，我在这里缺少什么？

Answer 1

经过一番摸索，我找到了一种可行的方法 - 似乎聚合物元素在包含在库中时效果不佳。

这就是 a-page.dart 的样子：

part of page;

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

和page.dart图书馆：

library page;

import 'package:polymer/polymer.dart';
import 'dart:html';

part 'a-page.dart';
part 'b-page.dart';
part 'c-page.dart';

删除页面库并将所有依赖项直接放入 a-page.dart:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('a-page')
class APage extends PolymerElement {

  APage.created() : super.created();

  factory APage() => new Element.tag('a-page');

}

在我的导航中-toolbar.dart，而不是导入 page/page.dart，我需要单独导入每个页面：

import 'page/a-page.dart';
import 'page/b-page.dart';
import 'page/c-page.dart';

...

  setPage(PolymerElement e) {

    DivElement div = shadowRoot.querySelector("core-scaffold .content")
    ..children.clear()
    ..append(e);

  }

在导航-toolbar.html 上，我还需要导入每个 html 组件才能正常工作：

<link rel="import" href="page/a-page.html">
<link rel="import" href="page/b-page.html">
<link rel="import" href="page/c-page.html">

甚至可以在库中包含聚合物元素吗？

将 polymer-dart 元素添加到 div

Add polymer-dart element to div

html

dart

polymer

dart-polymer