我是 Polymer 的新手，我正在尝试通过 jQuery 访问新自定义元素的 DOM，但没有成功。
当元素的初始子集保证存在时，我尝试通过 domReady 方法访问元素。
非常感谢任何帮助!
自定义元素:
<template>
<link rel="stylesheet" href="seed-element.css" />
<style>
.hero-slider { max-width: 1440px; }
</style>
<content>
<section class="hero-slider">
<div class="iosSlider">
<div class="slider">
<div class="item">
<img src="img/imageTest1.jpg" alt="IMAGE TEST 1">
</div>
<div class="item">
<img src="img/imageTest5.jpg" alt="IMAGE TEST 5">
</div>
</div>
</div>
</section>
</content>
</template>
<script>
Polymer('seed-element', {
domReady: function() {
var shadowRoot = $(this.shadowRoot || this);
var iosSliderElement = shadowRoot.find('.iosSlider');
iosSliderElement.iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
scrollbar: true,
scrollbarDrag: true,
scrollbarHide: false,
scrollbarLocation: 'bottom',
scrollbarBackground: '#000000',
scrollbarOpacity: '1',
scrollbarBorderRadius: '0'
});
}
});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.iosslider.js"></script>
HTML:
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="../../platform/platform.js"></script>
<link rel="import" href="seed-element.html">
</head>
<body unresolved>
<seed-element></seed-element>
</body>
最佳答案
解决您的问题的快速方法可能是这样的:
Polymer('seed-element', {
domReady: function() {
var shadowRoot = this.shadowRoot || this;
var iosSliderElement = $(shadowRoot.querySelector('.iosSlider'));
iosSliderElement.iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
scrollbar: true,
scrollbarDrag: true,
scrollbarHide: false,
scrollbarLocation: 'bottom',
scrollbarBackground: '#000000',
scrollbarOpacity: '1',
scrollbarBorderRadius: '0'
});
}
});
不使用付费 iosSlider 库的 jsbin:http://jsbin.com/foyodevu/2/edit
你看，domReady为每个 <seed-element> 调用在您的页面中，一旦将该元素插入 DOM 并且您就可以与其子元素进行交互，因此您不应该在 domReady 中查找每个种子元素，因为您可能只关心 this ，这是您新创建的种子元素。
其他一些注释
-
$((this.shadowRoot || this).querySelector('.iosSlider'))是查询 Polymer 元素的 Shadow DOM 的好方法。另一种选择是给元素一个 id，然后你可以这样做this.$.theElementsId. - 在上面的示例代码中，您使用
<content>节点。请注意，该元素类型在 Shadow dom 中具有特殊含义，并且可能不是您想要的。<content>节点允许 Web 组件的用户混合 light dom 和 Shadow dom。欲了解更多信息，请参阅这篇文章:http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation-separate - 我推荐一个更像
projectName-elementDescription的名称喜欢paper-input。也许jquery-iosslider？
关于jquery - 使用 JQuery 访问 Polymer 创建的 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24492035/