Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work

Question

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

Thanks for using polymer_elements. I'll try it soon. Can't promise how soon. — Günter Zöchbauer, Apr 16 '14 at 20:07
I finally found time to look into this. This is an interesting attempt. I never tried to create mustache binding at runtime. I'll try to find out if and how this works. — Günter Zöchbauer, Apr 22 '14 at 07:02

Günter Zöchbauer · Answer 1 · 2014-10-02T17:14:41.320

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

Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work

1 Answers1

Update

Update end

Linked