Question

为了在不创建自定义元素的情况下获取Polymer的数据绑定，我使用的是“dom-bind”模板助手。稍后，我将需要访问模板中的节点，以便我可以使用masonry.js 从数据中创建网格。

这是我在主文档中的模板：

  <!-- Skills --> 
  <template is="dom-bind" class="careerSkills_consumer projects_consumer" id="resume-container">
    <page-section id="resume">
      <section-title>Skills and Projects</section-title>
      <section-content>
        <template is="dom-repeat" items="{{careerSkills}}">
          <skill-category class="grid-item" title="{{item.header}}" skills="{{item.skills}}"></skill-category>  
        </template>
        <project-showcase class="grid-item" projects="{{projects}}"></project-showcase>
      </section-content>
    </page-section>
  </template>

数据本身在别处提供，并且无关紧要。我遇到的问题是dom-bind和dom-repeat似乎都创建了本地dom并将结果放在其中。

要创建我的网格，我需要访问网格的容器，它将是section-content元素和网格项，它们是skill-category内的dom-repeat元素模板。

如果他们都住在同一份文件中，我认为可以这样做（我是砌砖的新手，所以这可能实际上不起作用）：

document.addEventListener('WebComponentsReady', function () {
    $('#resume section-content').masonry({
        columnWidth: $('#resume skill-category')[0],
        itemSelector: 'skill-category',
        isFitWidth: true
    });
});

但查询似乎不起作用，因为大概我需要的元素隐藏在阴影dom中的主文档之外。

我可以通过以下方式访问#resume-container内的内容：

Polymer.dom(document.querySelector('#resume-container')).node.content

但是，我仍然无法访问skill-category中的dom-repeat元素。这有点迂腐，我甚至不确定它是否会在砖石试图进行定位时起作用。

有没有更好的方法来解决这个问题？

要明确的是，这个问题是关于如何正确获取对模板助手内部分发的内容的引用，但我也很感激使用聚合物做这种事情的任何一般建议，其中自定义元素不是正是我正在寻找的东西，因为我只会在一个地方使用模板而影子dom比帮助更麻烦，但我需要数据绑定。

查询绑定助手内部的元素

0 个答案: