jQuery + MarkItUp +聚合物-让它起作用？

Question

使用聚合物，我试图创建一个重用markItUp的组件，这样我就可以在需要时使用一个富文本编辑器。

然而，尽管我尝试，我无法使它正确地初始化。jQuery选择器根本找不到文本区域元素来执行它的魔术。我尝试了很多咒语，添加事件侦听器，响应特定的事件，而且很可能是因为我缺乏Javascript经验，我就是不能让它一起工作。下面是我到目前为止所得到的内容(请注意，这个文件位于一个名为“富文本区域”的文件夹中)：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/sets/default/style.css">

<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/sets/default/set.js"></script>

<polymer-element name="rich-textarea" attributes="rows cols value">
    <template>
        <textarea class="makeItRich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>
    </template>
    <script>
        Polymer('rich-textarea', {
            value: "",
            rows: 25,
            cols: 80,
            // here and below are where I need help
            domReady: function() {
                $(document).ready(function() {
                    $(".makeItRich").markItUp(mySettings);
                });
            }
        });
    </script>  
</polymer-element>

如能提供任何协助，将不胜感激。我认为这个问题是一个很好的试金石测试一般聚合物，因为它结合了三种技术。如果这“只是有效的”，那么很有可能任何事情都会在未来发挥作用。耽误您时间，实在对不起。

Answer 1

$(".makeItRich")将无法工作，因为textarea位于元素的ShadowRoot中，JQuery在那里找不到它。此外，CSS的作用域是元素，因此必须将CSS链接放在模板中。

当我尝试的时候，这个方法奏效了：

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/jquery2-import/jquery2-import.html">

<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

<polymer-element name="markitup-element" attributes="rows cols value">
<template>

  <style>
    :host {
      display: block;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">
  <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

  <textarea id="rich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>

</template>
<script>

  Polymer({
    value: "",
    rows: 25,
    cols: 80,
    domReady: function() {
      $(this.$.rich).markItUp(mySettings);
    }
  });

</script>  
</polymer-element>

Answer 2

我认为这个问题是对聚合物的试金石。

阴影DOM (由聚合物使用)本质上是将scoping的概念添加到CSS和DOM中。根据定义，这意味着假定一个巨大的全局范围的技术在Shadow DOM中根本不起作用。

例如，document.querySelector将不会在Shadow DOM中找到元素(同样，通过设计)。类似地，主文档中的CSS规则不会到达Shadow DOM中的元素(除非这些规则是Shadow DOM感知的)。

由于这个原因，是众所周知的，许多现有的技术不仅仅适用于今天的聚合物。

扩展DOM和CSS的能力是强大的，是一个巨大的飞跃，但它需要进行一些调整才能获得充分的优势。

Answer 3

这可能不是一个答案，但需要一些有学问的人的建议。

jQuery.noConflict();
$ = function(selector,context){ 
    if (typeof selector === "string") {
        var that = document.querySelector("el-test").shadowRoot;
        return new jQuery.fn.init(that.querySelectorAll(selector));
        //return new jQuery.fn.init(selector, that);
    }else{
        return new jQuery.fn.init(selector,context);
    }
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery); 

上面是我用来扩展jquery构造函数(参考文献)的内容。在此之后，我已经能够正常地在高分子事件中使用jquery选择器。让我知道什么是卖点(如果有的话，我想有)

小提琴是在- http://jsbin.com/IVodePuS/106/edit?html,output

谢谢