2

我正在向自定义元素中的 Bootstrap 选项卡框添加选项卡和选项卡窗格。有时它们会出现，但通常不会。有时会出现窗格，但不会出现选项卡。每次重新加载的结果都不同。如果它没有出现，则通过调整浏览器窗口大小或打开 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>

这是飞镖类：

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

1 回答 1

0

动态添加元素的问题主要是没有使用initPolymerin引起的main。

请参阅：Polymer querySelector 在 DartVM 上工作，但在编译后不在 Chrome 中

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

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

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

void enteredView() {
  // create and add your elements here
  super.enteredView();
}
于 2014-04-06T09:33:07.010 回答