Bootstrap.js nie działa w komponentach polimerowych

Obecnie pracuję nad tłumaczeniem naszego obecnego projektu Dart Web UI na Polymer.dart. Używamy Bootstrap 3 do stylizacji front-end i wielu animacji internetowych (np. Menu rozwijane, modals, tooltipy).Bootstrap.js nie działa w komponentach polimerowych

Jednak po przetłumaczeniu jednego składnika Web UI na Polymer, wszystkie Bootstrap JavaScript przestał działać dla podskładnika, ponieważ został on teraz zamknięty w ShadowDOM. Aby uzyskać dostęp do elementu ShadowDOM z Dart, muszę użyć pola shadowRoot, a z JavaScript w przeglądarce Chrome muszę użyć właściwości webkitShadowRoot, ale nadal nie mogę uzyskać menu rozwijanego, które działałoby poprawnie.

Po pierwsze, po wywołaniu menu rozwijanego ("przełączanie") w bootstrapie pojawia się menu rozwijane, ale nigdy nie znika. Ponadto wydaje się niemożliwe wykrycie, które łącze jest wyzwalane przez zdarzenie kliknięcia, ponieważ zdarzenie jest uruchamiane na poziomie okna. Oznacza to, że nie mogę znaleźć menu rozwijanego do wyświetlenia.

Czy ktoś ma doświadczenie w łączeniu programów typu twitter-bootstrap i Polymer?

Źródło

2013-08-21 user2338071

Twój questison jest o porcie Polymer.dart, ale odnosi się do Polymer.js deweloperów, jak również :)

Jak podkreślić, że problem jest z JS Bootstrap za. Nie wie o ShadowDOM i próbuje pobrać węzły z DOM przy użyciu globalnych selektorów. Na przykład, w bootstrap-carousel.js widzę takie rzeczy jak:

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

Zbadaliśmy użyciu Bootstrap komponenty wewnątrz polimeru trochę temu: https://github.com/Polymer/more-elements/tree/stable/Bootstrap

Najbardziej interesujące dla ciebie byłoby <bs-accordion-item> (Demo)

Proces polega zasadniczo na zawijaniu elementów Bootstrap wewnątrz niestandardowego elementu i wywoływaniu ich interfejsów API.

Dla CSS: jeśli to ich stylów wewnątrz elementu, rzeczy powinny generalnie działa:

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

Należy pamiętać, że jeśli bootstrap.css nadchodzi z CDN, musi być CORS -włączone, aby polyfills działały prawidłowo. Wymóg ten ustępuje, gdy natywne importowanie HTML wyląduje.

Źródło

2013-08-21 16:44:53 ebidel

Dzięki ebidel będę mieć jakieś eksperymenty, aby zobaczyć, czy mogę dostać Uruchomiona wersja dart – user2338071

Btw, demo w stabilnej gałęzi wydaje się nie działać na chrome i firefoxie w Linuksie, jednak ten w gałęzi master ma. – user2338071

Miałem podobny problem, http://stackoverflow.com/questions/18261596/twitter-bootstrap-styles-in- dart-polymer-template - kluczowe punkty, aby to działało to: a) załadowanie pliku css bootstrap z lokalnej lokalizacji i b) zastosowanie stylów autora za pomocą kodu, a nie znaczników. –

Udało mi się pobrać bootstrap.js z moich komponentów polimerowych, dodając atrybut lightdom do ich definicji.

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

I HTML gospodarz mógłby wyglądać następująco:

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

Uwaga: Użycie atrybutu lightdom zastąpi składniki z cienia DOM na światło DOM, które mogą powodować konflikty między stylizacja Twojego komponentu i istniejące style globalnego kontekstu.

Odnośne dyskusja: https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk

Na podstawie dyskusji I nie był w 100% pewien, czy modyfikator lightdom pozostanie standardowym sposobem osiągnięcia tego rodzaju funkcjonalność komponentów polimerowych.Być może autorzy mogliby to skomentować?

Źródło

2013-12-02 00:13:19

Problemem wskazanym w innych odpowiedziach jest cień dom. Bootstrap nie widzi tam elementów, a tym samym nie może wykonać swojej magii. Można wyłączyć shadowdom i zastosować style autora tak:

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

Trzeba będzie usunąć shadowdom dla wszystkich elementów nadrzędnych, jak również.

UWAGA:!. Będziesz korzystać z obsługi zdarzeń na kliknięcie za pomocą lightdom :(

Źródło

2014-01-16 15:30:10

Bootstrap.js nie działa w komponentach polimerowych

Odpowiedz

Powiązane problemy