dart - Dart:无法动态使用Polymer-ui-tabs和polymer-ui-pages

Question

我们想动态地使用polymer-ui-tabs和polymer-ui-pages。
以下静态示例正常运行(正确设置了选择的属性，触发了on-polymer-select事件)

  <polymer-ui-tabs selected="{{selectedTab}}" on-polymer-select="{{mymethod}}">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
  </polymer-ui-tabs>

  <polymer-ui-pages selected="{{selectedTab}}" on-polymer-select="{{mymethod2}}" flex>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
  </polymer-ui-pages>

动态构建dom时，永远不会触发on-polymer-select事件，并且只为polymer-ui-tabs设置所选属性。

@CustomTag('ve-result-dyn')
 class ResultElementDyn extends PolymerElement  {

 Element tabElement;
 Element pageElement;
 @published dynamic selectedTab;

 ResultElementDyn.created(): super.created() {
   buildDom();
 }

 @override
 void ready() {
   selectedTab = '1';
 }

 void setSelectedInTab() {
   print('in setSelectedInTab $selectedTab');
 }

 void setSelectedInPage() {
   print('in setSelectedInPage $selectedTab');
 }

 void buildDom(){
   print('in buildDom');

  tabElement = new Element.tag('polymer-ui-tabs');
  tabElement.setAttribute("id","dtabs");
  tabElement.setAttribute("selected","{{selectedTab}}");
  tabElement.setAttribute("on-polymer-select","{{setSelectedInTab}}");

  Element spanelement = new SpanElement();
  spanelement.innerHtml = 'One';
  tabElement.children.add(spanelement);

  spanelement = new SpanElement();
  spanelement.innerHtml = 'Two';
  tabElement.children.add(spanelement);

  spanelement = new SpanElement();
  spanelement.innerHtml = 'Three';
  tabElement.children.add(spanelement);

  this.shadowRoot.append(tabElement);
  this.shadowRoot.append(new DivElement());

  pageElement = new Element.tag('polymer-ui-pages');
  pageElement.setAttribute("id","dpages");
  pageElement.setAttribute("selected","{{selectedTab}}");
  pageElement.setAttribute("on-polymer-select","{{setSelectedInPage}}");

  spanelement = new SpanElement();
  spanelement.innerHtml = 'Page 1';
  pageElement.children.add(spanelement);

  spanelement = new SpanElement();
  spanelement.innerHtml = 'Page 2';
  pageElement.children.add(spanelement);

  spanelement = new SpanElement();
  spanelement.innerHtml = 'Page 3';
  pageElement.children.add(spanelement);

  this.shadowRoot.append(pageElement);

}

任何的想法？
最好的问候，安雅

Answer 1

我找到了解决此问题的方法。我仍然不知道是否有可能使Polymer评估运行时创建的 mustache 表达式。

更新资料

聚合物0.15.0添加injectBoundHtml。
使用过的表达式必须已经在某个地方使用过，Smoke知道可以为它们生成代码。
有关更多详细信息，请参见https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ。

更新结束

只需要进行一些小的更改。
我注释掉了原始行，并在下面的行中添加了新代码。

您可以保存StreamSubscription selSubscr = tabElement.onPolymerSelect.listen((e) => setSelectedInTab(e));的结果，并在不再对此事件感兴趣时调用selSubscr.cancel();。

library polymer_tabs_issue;

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:polymer_ui_elements/polymer_ui_tabs/polymer_ui_tabs.dart';
import 'package:polymer_ui_elements/polymer_ui_pages/polymer_ui_pages.dart';

@CustomTag('ve-result-dyn')
class ResultElementDyn extends PolymerElement {

  PolymerUiTabs tabElement;
  PolymerUiPages pageElement;
  @published dynamic selectedTab;

  ResultElementDyn.created() : super.created() {
    buildDom();
  }

  @override
  void ready() {
    selectedTab = '1';
  }

  void setSelectedInTab(CustomEvent e) {
    print('in setSelectedInTab $selectedTab, ${e.detail}');
  }

  void setSelectedInPage(CustomEvent e) {
    print('in setSelectedInPage $selectedTab, ${e.detail}');
  }

  void buildDom() {
    print('in buildDom');

    tabElement = new Element.tag('polymer-ui-tabs');
    tabElement.setAttribute("id", "dtabs");
    //tabElement.setAttribute("selected", "{{selectedTab}}");
    tabElement.bind('selected', new PathObserver(this, 'selectedTab'));
    //tabElement.setAttribute("on-polymer-select", "{{setSelectedInTab}}");
    tabElement.onPolymerSelect.listen((e) => setSelectedInTab(e));

    Element spanelement = new SpanElement();
    spanelement.innerHtml = 'One';
    tabElement.children.add(spanelement);

    spanelement = new SpanElement();
    spanelement.innerHtml = 'Two';
    tabElement.children.add(spanelement);

    spanelement = new SpanElement();
    spanelement.innerHtml = 'Three';
    tabElement.children.add(spanelement);

    this.shadowRoot.append(tabElement);
    this.shadowRoot.append(new DivElement());

    pageElement = new Element.tag('polymer-ui-pages');
    pageElement.setAttribute("id", "dpages");
    //pageElement.setAttribute("selected", "{{selectedTab}}");
    pageElement.bind('selected', new PathObserver(this, 'selectedTab'));

    //pageElement.setAttribute("on-polymer-select", "{{setSelectedInPage}}");
    pageElement.onPolymerSelect.listen((e) => setSelectedInPage(e));

    spanelement = new SpanElement();
    spanelement.innerHtml = 'Page 1';
    pageElement.children.add(spanelement);

    spanelement = new SpanElement();
    spanelement.innerHtml = 'Page 2';
    pageElement.children.add(spanelement);

    spanelement = new SpanElement();
    spanelement.innerHtml = 'Page 3';
    pageElement.children.add(spanelement);

    this.shadowRoot.append(pageElement);
    //this.templateInstance.firstNode.append(pageElement);
  }
}