Dart：聚合物ui-tabs和聚合物ui页面的动态使用不工作 [英] Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work

问题描述

我们想动态使用polymer-ui-tabs和polymer-ui-pages。
以下静态示例工作正常（选择的属性设置正确，on-polymer-select事件触发）

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>

动态构建dom时，on-polymer-select事件不会触发，

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

}

任何想法？
Best regards，Anja

Any idea? Best regards, Anja

推荐答案

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

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.

Polymer 0.15.0添加 injectBoundHtml 。
所使用的表达式必须已经在某处使用，因此Smoke知道为它们生成代码。
请参见 https://groups.google。

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.

只需要进行一些小的更改。

我注释掉了原始行，并在下面添加了新代码。

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

您可以保存 StreamSubscription的结果selSubscr = tabElement.onPolymerSelect.listen（（e）=> setSelectedInTab（e））; code>并且在您不再对此事件感兴趣时调用 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页面的动态使用不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！