3

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

4

2 回答 2

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

一个不使用付费 iosSlider 库的 jsbin：http: //jsbin.com/foyodevu/2/edit

您会看到，一旦该元素被插入到 DOM 并准备好与它的子元素交互，就会为页面中的domReady每个<seed-element>元素调用，因此您不应该在 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？
于 2014-07-01T00:19:41.787 回答
0

我创建了一个 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

欢呼；）

于 2015-01-19T15:33:20.517 回答