7

我目前正在将我们当前的 Dart Web UI 项目翻译成 Polymer.dart。我们将 Bootstrap 3 用于前端样式和许多 Web 动画（例如下拉菜单、模式、工具提示）。

然而，在我将一个 Web UI 组件翻译成 Polymer 后，所有的 Bootstrap JavaScript 都停止了对子组件的工作，因为它现在被封装在 ShadowDOM 中。要从 Dart 访问 ShadowDOM 中的元素，我必须使用 shadowRoot 字段，而从 Chrome 中的 JavaScript 我必须使用 webkitShadowRoot 属性，但我仍然无法让单个下拉菜单正常工作。

首先，在 bootstrap 中调用 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>（演示）

该过程基本上是将 Bootstrap 内容包装在自定义元素中并调用其 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 Imports 登陆时，这个要求就消失了。

于 2013-08-21T16:44:53.283 回答
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 属性会将您的组件从 shadow DOM 替换为 light DOM，这可能会导致组件的样式与全局上下文的现有样式发生冲突。

相关讨论：https ://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/ps6b9wlg1Vk

根据讨论，我不能 100% 确定 lightdom 改性剂是否会成为实现聚合物组件这种功能的标准方式。也许作者可以对此发表评论？

于 2013-12-02T00:13:19.687 回答
1

其他答案中指出的问题是影子dom。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-16T15:30:10.193 回答