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);

}

有什么想法吗？此致，Anja

Answer 1

我找到了解决这个问题的方法。我仍然不知道是否可以使Polymer评估在运行时创建的胡须表达式。

更新

聚合物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);
  }
}

Dart：聚合物-ui-tabs和聚合物-ui页面的动态使用不起作用

1 个答案:

更新

更新结束