Bootstrap.js funktioniert nicht in Polymer-Komponenten

Ich arbeite derzeit an der Übersetzung unseres aktuellen Dart Web UI-Projekts in Polymer.dart. Wir verwenden Bootstrap 3 für das Front-End-Styling und viele Web-Animationen (z. B. Dropdown-Menüs, Modale, Tooltips).Bootstrap.js funktioniert nicht in Polymer-Komponenten

Nachdem ich jedoch eine Web-UI-Komponente in Polymer übersetzt hatte, funktionierte das Bootstrap-JavaScript für die Sub-Komponente nicht mehr, da es jetzt in ShadowDOM gekapselt war. Um auf ein Element in der ShadowDOM von Dart zuzugreifen, muss ich das shadowRoot-Feld verwenden, und von JavaScript in Chrome muss ich die webkitShadowRoot-Eigenschaft verwenden, aber ich kann kein einziges Dropdown-Menü erhalten, um ordnungsgemäß zu funktionieren.

Erstens, nach dem Aufrufen der Dropdown-API im Bootstrap, wird das Dropdown-Menü angezeigt, verschwindet aber nie. Außerdem scheint es unmöglich zu erkennen, welche Verknüpfung durch das Klickereignis ausgelöst wird, da das Ereignis auf der Fensterebene ausgelöst wird. Das bedeutet, dass ich nicht finden kann, welches Dropdown-Menü angezeigt werden soll.

Hat jemand Erfahrung mit twitter-bootstrap und Polymer zusammen?

Quelle

2013-08-21 user2338071

Ihre questison ist über die Polymer.dart Hafen, sondern gilt für Polymer.js Devs auch :)

Wie Sie weisen darauf hin, das Problem mit Bootstrap JS ist. Es kennt ShadowDOM nicht und versucht, Knoten aus dem DOM mithilfe globaler Selektoren abzurufen. Zum Beispiel in Bootstrap-carousel.js, sehe ich Dinge wie:

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

erforscht Wir Bootstrap Komponenten im Inneren des Polymers ein wenig vor: https://github.com/Polymer/more-elements/tree/stable/Bootstrap

Das interessanteste an Sie wäre, <bs-accordion-item> (Demo)

Der Prozess besteht im Wesentlichen darin, Bootstrap-Zeug in ein benutzerdefiniertes Element zu verpacken und ihre APIs aufzurufen.

Für die CSS: Wenn Sie ihr Sheet in Ihrem Element umfassen, sollten die Dinge arbeiten in der Regel:

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

Denken Sie daran, dass, wenn bootstrap.css von einem CDN kommt, braucht es CORS zu sein - aktiviert, damit die Polyfills ordnungsgemäß funktionieren. Diese Anforderung entfällt, wenn native HTML-Importe landen.

Quelle

2013-08-21 16:44:53 ebidel

Dank ebidel Ich werde ein paar Experimente zu sehen, ob ich ein Dart-Version zum Laufen bringen kann – user2338071

Btw, die Demo in der stable branch scheint nicht auf chrome und firefox in Linux, aber die in der Master-Zweig funktioniert nicht. – user2338071

Ich hatte ein ähnliches Problem, http://stackoverflow.com/questions/18261596/twitter-bootstrap-styles-in- Dart-Polymer-Template - die wichtigsten Punkte, um dies zu erreichen, waren: a) Laden Sie die Bootstrap-CSS-Datei von einem lokalen Ort, und b) wenden Sie Autorenstile über Code, nicht Markup. –

Ich habe es geschafft, bootstrap.js für meine Polymer-Komponenten arbeiten zu lassen, indem ich das Attribut lightdom zu ihrer Definition hinzufüge.

<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>

Und der Wirt HTML könnte wie folgt aussehen:

<!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>

Bitte beachten Sie: Mit dem lightdom Attribute wird Ihre Komponenten aus dem Schatten DOM zum Licht DOM ersetzen, die zwischen Konflikten führen können das Styling Ihrer Komponente und die vorhandenen Stile des globalen Kontexts.

Die Siehe auch: https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk

auf der Diskussion Basierend ich nicht 100% ig sicher, ob der lightdom Modifikator war die Standardmethode bleibt diese Art von Funktionalität für Polymerkomponenten zu erreichen.Vielleicht könnten die Autoren das kommentieren?

Quelle

2013-12-02 00:13:19

Das Problem, auf das in den anderen Antworten hingewiesen wird, ist der Schattenwurf. Bootstrap sieht die Elemente nicht dort und kann daher seine Magie nicht nutzen. Sie können die shadowdom deaktivieren und die Autor Stile wie dies gilt: für alle übergeordneten Elemente sowie

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 
    } 
}

Sie müssen entfernen Sie die shadowdom.

WARNUNG:. Sie können sich auf dem Click-Ereignishandler verwenden, indem lightdom mit :(

Quelle

2014-01-16 15:30:10

Bootstrap.js funktioniert nicht in Polymer-Komponenten

Antwort

Verwandte Themen