Bootstrap.jsがポリマーコンポーネントで動作していません

現在、現在のDart Web UIプロジェクトをPolymer.dartに翻訳しています。フロントエンドのスタイルや多くのウェブアニメーション（たとえば、ドロップダウンメニュー、モーダル、ツールチップ）にはBootstrap 3を使用します。Bootstrap.jsがポリマーコンポーネントで動作していません

しかし、1つのWeb UIコンポーネントをPolymerに変換した後、ShadowDOMにカプセル化されたため、すべてのBootstrap JavaScriptがそのサブコンポーネントで機能しなくなりました。ダートからShadowDOMの要素にアクセスするには、shadowRootフィールドを使用する必要があります。また、ChromeのJavaScriptからwebkitShadowRootプロパティを使用する必要がありますが、ドロップダウンメニューを1つだけ正しく取得することはできません。

まず、ブートストラップでdropdown（ 'toggle'）APIを呼び出した後、ドロップダウンメニューが表示されますが、決して消えません。また、イベントがウィンドウレベルで発生しているため、クリックイベントによってどのリンクがトリガーされたかを検出することは不可能です。つまり、表示するドロップダウンメニューが見つかりません。

誰でもtwitter-bootstrapとPolymerを一緒に使っている経験がありますか？

出典

2013-08-21 user2338071

あなたquestisonはPolymer.dartポートについてですが、同様にPolymer.jsの開発者に適用されます:)

あなたが指摘するように、問題は、ブートストラップのJSです。 ShadowDOMについて知らず、グローバルセレクタを使用してDOMからノードをフェッチしようとします。

$(document).on('click.carousel.data-api', ...', function (e) { ...});

私たちは、少し前にポリマーの内部のブートストラップのコンポーネントを使用して探検：あなたへ https://github.com/Polymer/more-elements/tree/stable/Bootstrap

最も興味深いのは<bs-accordion-item>（だろう例えば、ブートストラップ・carousel.jsに、私はのようなものが見Demo）

プロセスは、基本的にカスタム要素の中にブートストラップの内容をラップし、そのAPIを呼び出します。 CSSについては

：あなたの要素の中に自分のスタイルシートが含まれている場合、物事は一般的に動作するはずです：

<polymer-element name="my-element"> <template> <link rel="stylesheet" href="bootstrap.css"> ... </template> <script>...</script> </polymer-element>

bootstrap.cssがCDNから来ているならば、それはCORSにする必要があることに留意してくださいポリフェルが正しく機能するようになりました。この要件は、ネイティブHTMLのインポートが終わると消え去る。

出典

2013-08-21 16:44:53 ebidel

おかげでebidel私はダーツのバージョンで実行を得ることができるかどうかを確認するためにいくつかの実験があるでしょう – user2338071

ところで、デモ。安定したブランチでは、Linuxのchromeとfirefoxで動作していないようですが、masterブランチにあるものはそうです。 – user2338071

私も同様の問題がありました。http://stackoverflow.com/questions/18261596/twitter-bootstrap-styles-in- dart-polymer-template - この作業を行うためのポイントは、a）ローカルの場所からブートストラップCSSファイルを読み込み、b）マークアップではなくコードを使って作成者スタイルを適用することでした。 –

lightdom属性を定義に追加することで、ポリマーコンポーネントのbootstrap.jsを取得できました。

<polymer-element name="my-element-with-bootstrap-js" lightdom 
apply-author-styles> 
<template> 
<div>fancy template markup here</div> 
</template> 
<script type="application/dart" src="my-element-with-bootstrap-js.dart"></script> 
</polymer-element>

とホストHTMLは次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
<title>Unarin</title> 
<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 


<link rel="import" href="elements/my-element-with-bootstrap-js.html"> 

<script type="application/dart">export 'package:polymer/init.dart';</script> 
<script src="packages/browser/dart.js" type="text/javascript"></script> 

<link rel="stylesheet" 
    href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
<script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" 
    type="text/javascript"></script> 
<script 
    src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" 
    type="text/javascript"></script> 
</head> 

<body> 
    <my-element-with-bootstrap-js></my-element-with-bootstrap-js> 
</body> 
</html>

ご注意：lightdom属性を使用すると、間の競合が発生する可能性があり、光DOMに影DOMからあなたの部品を交換しますコンポーネントのスタイリングとグローバルコンテキストの既存のスタイルをサポートします。

関連の議論：私はした議論に基づいてhttps://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk

ない100％lightdom修飾子は、ポリマー成分のためのこの種の機能を実現するための標準的な方法を滞在する場合を確認してください。おそらく、著者はそれについてコメントできますか？

出典

2013-12-02 00:13:19

他の回答で指摘されている問題は、シャドウドームです。ブートストラップはその中の要素を見ないので、その魔法を行うことはできません。あなたはshadowdomを無効にして、このような著者のスタイルを適用することができます。

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

@CustomTag('main-messages') 
class MainMessagesElement extends PolymerElement { 
    MainMessagesElement.created() : super.created(); 

    //This enables the styling via bootstrap.css 
    bool get applyAuthorStyles => true; 
    //This enables the bootstrap javascript to see the elements 
    @override 
    Node shadowFromTemplate(Element template) { 
    var dom = instanceTemplate(template); 
    append(dom); 
    shadowRootReady(this, template); 
    return null; // no shadow here, it's all bright and shiny 
    } 
}

あなたが同様にすべての親要素に対してshadowdomを削除する必要があります。

WARNING：！あなたがlightdomを使って、上のクリックイベントハンドラを使用します:(

出典

2014-01-16 15:30:10

Bootstrap.jsがポリマーコンポーネントで動作していません

答えて

関連する問題