twitter-bootstrap - Polymer.dart动态添加的元素并不总是出现

Question

我在自定义元素的“ bootstrap ”选项卡框中添加了一个选项卡和一个选项卡 Pane 。有时它们出现，但经常不出现。有时会显示 Pane ，但不会显示选项卡。每次重新加载的结果都不同。如果没有出现，则通过调整浏览器窗口大小或打开Dartium检查器之类的方法引起重排，使其突然出现。

我正在使用聚合物0.9.5。这是HTML:

<polymer-element name="confab-output-box">
  <link rel="stylesheet" type="text/css" href="../resources/css/bootstrap.min.css">
  <template bind>
    <div id="output_container">
      <ul id="tabs" class="nav nav-tabs">
      </ul>
      <div id="tab-content" class="tab-content">
      </div>
    </div>
  </template>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="../resources/js/bootstrap.min.js"></script>
  <script type="application/dart" src="confab_output_box.dart"></script>
</polymer-element>

这是Dart类:

library confab_output_box;

import 'dart:html';
import 'package:polymer/polymer.dart';
import '../confab_view/confab_view.dart';

@CustomTag('confab-output-box')
class ConfabOutputBox extends PolymerElement {
    ConfabView activeView;

    ConfabOutputBox.created() : super.created();

    void attachView(ConfabView view) {
        $['tabs'].children.add(
            new LIElement()
                ..id = '${view.id}-tab'
                ..children.add(
                    new AnchorElement()
                        ..href = '#${view.id}'
                        ..onClick.listen(tabClicked)
                        ..text = view.tabTitle
                )
        );

        $['tab-content'].children.add(view..classes.add('tab-pane'));
    }

    void detachView(ConfabView view) {
        shadowRoot.getElementById('${view.id}-tab').remove();
        shadowRoot.getElementById(view.id).remove();
    }

    void activateView(ConfabView view) {
        if (activeView != null) {
            shadowRoot.getElementById('${activeView.id}-tab').classes.remove('active');
            shadowRoot.getElementById(activeView.id).classes.remove('active');
        }
        shadowRoot.getElementById('${view.id}-tab').classes.add('active');
        shadowRoot.getElementById(view.id).classes.add('active');
        activeView = view;
    }

    void tabClicked(Event e) {
        e.preventDefault();
        ConfabView view = shadowRoot.querySelector((e.toElement as AnchorElement).href);
        activateView(view);
    }
}

Answer 1

动态添加元素的问题主要是由于未在initPolymer中使用main引起的。

请参阅:Polymer querySelector working on DartVM but not in Chrome after compile

<template bind> <!-- bind is redundant here -->

问题可能是时间问题。也许在插入新标签之前执行BootStrap脚本。

您能否尝试移动将新元素添加到enteredView的代码

void enteredView() {
  // create and add your elements here
  super.enteredView();
}