使用Polymer,我试图创建一个重新使用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>
如有任何协助,我们将不胜感激。我认为这个问题是对聚合物的一个很好的试金石,因为它将三种技术结合在一起。如果这"只是有效的",那么大多数事情都有可能继续下去。谢谢你抽出时间。
$(".makeItRich")
将不起作用,因为文本区域在元素的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>
我认为这个问题是对聚合物的一个很好的试金石
Shadow DOM(Polymer使用)本质上是将scoping
的概念添加到CSS和DOM中。根据定义,这意味着假设一个巨大的全局范围的技术在Shadow DOM中根本无法开箱即用。
例如,document.querySelector
在Shadow DOM中找不到元素(同样是经过设计的)。类似地,主文档中的CSS规则不会到达Shadow DOM内部的元素(除非这些规则是支持Shadow DOM的)。
由于这个原因,众所周知许多现有技术目前并不只是适用于聚合物。
确定DOM和CSS范围的能力非常强大,是一个巨大的飞跃,但它需要进行一些调整才能充分发挥优势。
这可能不是一个答案,但需要来自的学者的一些建议
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构造函数(引用)的内容。之后,我就可以在Polymer事件中正常使用jquery选择器了。让我知道有哪些陷阱(如果有的话,我想有)
小提琴在-http://jsbin.com/IVodePuS/106/edit?html,输出
感谢