2

カスタム要素の Bootstrap タブ ボックスにタブとタブ ペインを追加しています。表示されることもあれば、表示されないこともよくあります。ペインが表示されてもタブが表示されないことがあります。結果はリロードごとに異なります。表示されない場合は、ブラウザ ウィンドウのサイズを変更するか、Dartium インスペクタを開くなどしてリフローを発生させると、突然表示されます。

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

1 に答える 1

0

動的に追加された要素に関する問題は、主に in を使用initPolymerしていないことが原因mainです。

参照: DartVM では動作するが、コンパイル後に Chrome では動作しない Polymer querySelector

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

問題はタイミングの問題である可能性があります。新しいタグが挿入される前に、BootStrap スクリプトが実行される可能性があります。

新しい要素を追加するコードをenteredView

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