Dart: Dynamic usage of polymer-ui-tabs and polymer

问题:

we would like to use polymer-ui-tabs and polymer-ui-pages dynamically. the following static example works fine (attribute selected is set properly, on-polymer-select event is fired)

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

When building the dom dynamically, the on-polymer-select event is never fired and the attribute selected is only set for 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);

}

Any idea? Best regards, Anja

回答1:

I found a way to solve this. I still don't know if it is possible to make Polymer evaluate mustache expressions created at runtime though.

Update

Polymer 0.15.0 adds injectBoundHtml. The used expressions must already be used somewhere so Smoke knows to generate code for them. See https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ for more details.

Update end

Only a few small changes were necessary.
I commented out the original line and added the new code the line below.

You can save the result of StreamSubscription selSubscr = tabElement.onPolymerSelect.listen((e) => setSelectedInTab(e)); and call selSubscr.cancel(); when you are no longer interested in this event.

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