CODEWITHSUNDEEP
javascripthtmldompolymer
framled
framled

Reputation: 418

get elements produced by a dom-repeat template selected by a content element

i'm trying to get elements produced by a helper elements on polymer, which is selected of a content tag. this a simple example that I trying to do:

dom-module 

<dom-module id="x-foo">
<template>
    <content id="content"></content>
</template>
<script>
    Polymer({
        is: 'x-foo',
	    attached: function()
            var effectiveChildren = this.getEffectiveChildren("span");
            console.log(effectiveChildren);
        }
    });
</script>
</dom-module>

index.html 

<template is="dom-bind">
    <x-foo>
        <template is="dom-repeat" items="{{list}}">
            <span>{{item.name}}</span>
        </template>
    </x-foo>
</template>
<script>
    var scope = document.querySelector("template[is='dom-bind']");
    scope.list = [{"name":"javier"},{"name":"pedro"},{"name":"javier2"}]
</script>

--- edit ---

I try with: 

getDistributedNodes()
getEffectiveChildren()
getContentChildren()

any hint??

Upvotes: 3

Views: 1072

Answers (1)

Westbrook
Westbrook

Reputation: 608

So there was a little bit more to this, but also a little bit less. The code you looking for is:

this.queryAllEffectiveChildren('span');

However, there's gonna be a lot of particularities around when all of the DOM is available to actually run this depending on the final application of your component. I've got it working here: http://plnkr.co/edit/nfER4vTe5y7CddHYO5bk?p=preview the main thing being I'm waiting for the dom-change event on the dom-repeat to check for those elements. There's definitely something cleaner to be used around DOM flush or the like, but I'm not sure which way to direct you in there. The main crux is:

<template>
  There are {{childCount}} children.<br/>
    <content></content>
</template>
<script>
    Polymer({
        is: 'my-element',
        listeners: {
          'dom-change': 'childCheck'
        },
          childCheck: function() {
              this.childCount = this.queryAllEffectiveChildren('span').length;
              console.log(this.queryAllEffectiveChildren('span'));
        }
    });
</script>

Upvotes: 2

Related Questions