7

私は現在、現在の Dart Web UI プロジェクトを Polymer.dart に変換する作業を行っています。フロントエンドのスタイリングと多くの Web アニメーション (ドロップダウン メニュー、モーダル、ツールチップなど) には Bootstrap 3 を使用します。

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

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

twitter-bootstrap と Polymer を一緒に使った経験のある人はいますか?

4

3 に答える 3

9

あなたの質問はPolymer.dartポートに関するものですが、Polymer.js開発者にも当てはまります:)

ご指摘のとおり、問題は Bootstrap の JS にあります。ShadowDOM を認識せず、グローバル セレクターを使用して DOM からノードを取得しようとします。たとえば、bootstrap-carousel.js では、次のようなことがわかります。

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

少し前に、Polymer 内で Bootstrap コンポーネントを使用することを検討しました: https://github.com/Polymer/more-elements/tree/stable/Bootstrap

あなたにとって最も興味深いのは<bs-accordion-item>( Demo )

このプロセスは基本的に、Bootstrap のものをカスタム要素内にラップし、それらの 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-21T16:44:53.283 に答える
1

他の回答で指摘されている問題は、シャドウドームです。Bootstrap はそこにある要素を認識しないため、その魔法を実行できません。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
  }   
}

すべての親要素のシャドウダムも削除する必要があります。

警告: lightdom :( を使用して、オンクリック イベント ハンドラーを使用します。

于 2014-01-16T15:30:10.193 に答える
1

ポリマー コンポーネントの定義に 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

議論に基づいて、lightdom修飾子がポリマーコンポーネントのこの種の機能を達成する標準的な方法であり続けるかどうかは100％確信が持てませんでした. おそらく、著者はそれについてコメントできますか？

于 2013-12-02T00:13:19.687 に答える