Question

我是使用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>

Answer 1

您问题的快速解决方案可能是这样的：

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'
    });
  }
});

没有使用for-pay 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>节点。请注意，该元素类型在阴影dom中具有特殊含义，可能不是您想要的。 <content>节点允许Web组件的用户混合light dom和shadow dom。有关详细信息，请参阅此文章：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation-separate
我建议使用projectName-elementDescription更像paper-input的名称。也许jquery-iosslider？

Answer 2

我创建了一个jquery-polymer插件，它有很多功能可以帮助你处理聚合物阴影dom

https://github.com/digital-flowers/jquery-polymer

选择聚合物元素中的任何元素，比如说

<my-button id='button1'></my-button>

首先你需要使用

获得按钮阴影根

$("#button1").getShadowRoot()

这会将按钮阴影根返回为jquery对象，然后您可以选择其中的任何内容，例如

$("#button1").getShadowRoot().find("ul > li:first")

同样在您的示例中，您可以在聚合物组件中使用它，例如

$(this).getShadowRoot().find("li:first")

请注意，此插件和另一个名为jquery-ui-polymer的插件修复了许多与聚合物项目的jquery和jquery ui兼容性问题

https://github.com/digital-flowers/jquery-polymer

https://github.com/digital-flowers/jquery-ui-polymer

欢呼;）

使用JQuery访问Polymer创建的DOM

2 个答案: