Bootstrap.js不能在聚合物組件中工作

我目前正在將我們當前的Dart Web UI項目翻譯爲Polymer.dart。我們使用Bootstrap 3作爲前端樣式和許多網頁動畫（例如下拉菜單，模式，工具提示）。Bootstrap.js不能在聚合物組件中工作

但是，在我將一個Web UI組件翻譯成Polymer後，所有Bootstrap JavaScript停止工作，因爲它現在封裝在ShadowDOM中。要從Dart訪問ShadowDOM中的元素，我必須使用shadowRoot字段，並且通過Chrome中的JavaScript，我必須使用webkitShadowRoot屬性，但仍然無法使單個下拉菜單正常工作。

首先，在bootstrap中調用下拉（'toggle'）API後，下拉菜單出現，但永遠不會消失。另外，由於事件是在窗口級觸發的，所以似乎不可能檢測到由點擊事件觸發的鏈接。這意味着我無法找到要顯示的下拉菜單。

有沒有人有使用twitter-bootstrap和Polymer在一起的經驗？

來源

2013-08-21 user2338071

你questison是關於Polymer.dart端口，但適用於Polymer.js開發者以及:)

正如你指出，這個問題是有引導的JS。它不知道ShadowDOM，並嘗試使用全局選擇器從DOM中獲取節點。例如，在引導-carousel.js，我看到的東西，如：

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

我們探討了用聚合物內一點點前的引導組件： https://github.com/Polymer/more-elements/tree/stable/Bootstrap

最有趣的你會<bs-accordion-item>（ Demo）

該過程基本上是將自舉元素包裝在自定義元素中並調用到它們的API中。

對於CSS：如果您包括您元素中的樣式表，事情應該一般工作：

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

請記住，如果bootstrap.css從CDN的到來，它需要CORS - 使polyfills能夠正常工作。當本地HTML Imports着陸時，這個要求就會消失。

來源

2013-08-21 16:44:53 ebidel

感謝ebidel我還會有一些實驗，看看我是否能得到一個飛鏢運行的版本，使用同單擊事件處理 – user2338071

順便說一句，演示在穩定的分支似乎沒有在Linux中的鉻和Firefox的工作，但在主分支之一。 – user2338071

我有一個類似的問題，http://stackoverflow.com/questions/18261596/twitter-bootstrap-styles-in-飛鏢聚合物模板 - 獲得這個工作的關鍵點是a）從本地位置加載bootstrap 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更換您的組件，這可能會導致衝突組件的樣式和全局上下文的現有樣式。

基於上述討論，我不是100％肯定，如果lightdom修改將保持標準的方式來實現這種聚合物部件的功能。也許作者可以對此發表評論？

來源

2013-12-02 00:13:19

在其他答案中指出的問題是陰影。 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 
    } 
}

您還需要刪除所有父元素的shadowdom。

警告：你會用lightdom :(

來源

2014-01-16 15:30:10

Bootstrap.js不能在聚合物組件中工作

回答

相關問題