relationship between <content> and template repeat?

749 views
Skip to first unread message

Seth Ladd

unread,
Aug 12, 2013, 8:30:03 PM8/12/13
to polymer-dev
Hi everyone,

Below, I have a <template repeat> that iterates twice. It includes <content></content>. I only see the contents of <content> ("why don't I see myself twice?") once. I know the template is looping twice, though (I put in debug statements).

Should the below code produce "why don't I see myself twice?" twice? I'm wondering if this is a bug or I just need to go back and reread everything.

Thanks!
Seth

<html>
<head>
  <title>Test</title>
  <script src="polymer.min.js"></script>
</head>
<body>

<polymer-element name="my-test">
  <template>
    Hello from the custom element

    <template repeat="{{people}}">
      <content></content>
    </template>
  </template>
  <script>
  Polymer('my-test', {
    people: [{'firstName': 'f1', 'lastName': 'l1'},{'firstName': 'f2', 'lastName': 'l2'}]
  });
  </script>
</polymer-element>

<my-test>
  <p>why don't I see myself twice?</p>
</my-test>

</body>
</html>

Steve Orvell

unread,
Aug 12, 2013, 8:35:44 PM8/12/13
to Seth Ladd, polymer-dev
`once` is expected.

It's the same as if you just put 2 <content> elements in a shadowRoot. Since the first <content> selects all nodes (it doesn't have a select attribute), the 2nd has nothing left to select.

It's possible to get fancy and do something like this <content select=".{{someClass}}"> to limit what gets selected into each content such that you use repeat to help `decorate` an element's children.


Follow us on Google+ : plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Seth Ladd

unread,
Aug 12, 2013, 8:45:21 PM8/12/13
to Steve Orvell, polymer-dev
Ah, thanks Steve. I didn't realize that <content> actually "removes" the elements before it reinserts them into the shadow dom. If that's a fair characterization, then the behavior makes sense.

(fwiw it would be rad if polymer.js had a dev mode that reported "oh hey, you wanted <content> but I found nothing". This could work for content select, too :)

Is there a pattern to accomplish the goal? I'd like the consumer of the custom element to control what is presented inside a custom element's `repeat` loop. This is sort of like the, ironically enough, "template pattern" from OOP.

Thanks!

Eric Bidelman

unread,
Aug 12, 2013, 9:58:50 PM8/12/13
to Seth Ladd, Steve Orvell, polymer-dev
Here's an example using <select> and mixing in user <options>s.


<polymer-element name="my-select">
<template>
  <select id="select">
    <option template repeat="{{options}}">{{}}</option>
  </select>
  <content id="c" select="option"></content>
</template>
<script>
Polymer('my-select', {
  options: [ "One", "Two", "Three" ],
  ready: function() {
    var options = this.$.c.getDistributedNodes();
    [].forEach.call(options, function(opt, i) {
      this.$.select.appendChild(opt);
    }.bind(this));
  }
});
</script>
</polymer-element>

<my-select>
  <option>User option</option>
  <option>User option 2</option>
  <option>User option 3</option>
</my-select>

John Messerly

unread,
Aug 12, 2013, 10:54:45 PM8/12/13
to Seth Ladd, Steve Orvell, polymer-dev
On Mon, Aug 12, 2013 at 5:45 PM, Seth Ladd <seth...@google.com> wrote:
(fwiw it would be rad if polymer.js had a dev mode that reported "oh hey, you wanted <content> but I found nothing". This could work for content select, too :)

hmm, kind of hacky, but you can do that by putting in fallback content:

<content>oh hey, you wanted &lt;content&gt; but I found nothing</content>


Steve Orvell

unread,
Aug 12, 2013, 11:00:55 PM8/12/13
to John Messerly, Seth Ladd, polymer-dev
I'd like the consumer of the custom element to control what is presented inside a custom element's `repeat` loop. 

Reply all
Reply to author
Forward
0 new messages