부트 스트랩 .js가 폴리머 구성 요소에서 작동하지 않습니다.

현재 현재의 다트 웹 UI 프로젝트를 Polymer.dart로 변환하려고합니다. 프런트 엔드 스타일 및 많은 웹 애니메이션 (예 : 드롭 다운 메뉴, 모달, 툴팁)에 부트 스트랩 3을 사용합니다.부트 스트랩 .js가 폴리머 구성 요소에서 작동하지 않습니다.

그러나 하나의 웹 UI 구성 요소를 Polymer로 변환 한 후 모든 Bootstrap JavaScript가 이제 ShadowDOM에 캡슐화되었으므로 하위 구성 요소에서 작동하지 않습니다. Dart에서 ShadowDOM의 요소에 액세스하려면 shadowRoot 필드를 사용해야하고 Chrome JavaScript에서 webkitShadowRoot 속성을 사용해야하지만 여전히 제대로 작동하려면 단일 드롭 다운 메뉴를 얻을 수 없습니다.

첫째, 부트 스트랩에서 드롭 다운 ('toggle') API를 호출 한 후 드롭 다운 메뉴가 나타나지만 절대로 사라지지 않습니다. 또한 이벤트가 창 수준에서 시작된 이후 클릭 이벤트에 의해 트리거되는 링크를 감지하는 것은 불가능합니다. 즉, 표시 할 드롭 다운 메뉴를 찾을 수 없습니다.

twitter-bootstrap과 Polymer를 함께 사용해 본 경험이 있습니까?

출처

2013-08-21 user2338071

귀하의 questison는 Polymer.dart 포트에 대해이지만,뿐만 아니라 Polymer.js 개발자들 : 당신이 지적으로

가, 문제가 부트 스트랩의 JS 함께 적용됩니다. ShadowDOM에 대해 알지 못하고 전역 선택기를 사용하여 DOM에서 노드를 가져 오려고 시도합니다. ( 이 https://github.com/Polymer/more-elements/tree/stable/Bootstrap

당신에게 가장 흥미로운 <bs-accordion-item>를 다음과 같습니다

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

우리는 내부 조금 전에 폴리머의 부트 스트랩 구성 요소를 사용하여 탐색 : 예를 들어, 부트 스트랩 - 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 할 필요가있다 Polyfill이 제대로 작동하도록합니다. 원시 HTML 가져 오기가 시작될 때이 요구 사항은 사라집니다.

출처

2013-08-21 16:44:53 ebidel

덕분에 나는 다트 버전 실행을 얻을 수 있는지 확인하기 위해 몇 가지 실험을해야합니다 ebidel를 사용하여 온 클릭 이벤트 핸들러를 사용합니다 – user2338071

, BTW 데모 안정적인 지점에서 리눅스 크롬과 파이어 폭스에서 작동하지 않는 것 같지만, 마스터 브랜치의 것은 그렇다. – 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>

참고 : 빛 DOM에 그림자 DOM에서 구성 요소를 대체 할 lightdom 속성을 사용 간의 충돌을 일으킬 수 구성 요소의 스타일 및 글로벌 컨텍스트의 기존 스타일

관련 토론 : I이었다 토론을 바탕으로 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을 제거해야합니다.

경고 :!. 당신은 lightdom :(

출처

2014-01-16 15:30:10

부트 스트랩 .js가 폴리머 구성 요소에서 작동하지 않습니다.

답변

관련 문제