PolymerElements / iron-pages

Simple content switcher
https://www.webcomponents.org/element/PolymerElements/iron-pages
48 stars 19 forks source link

Mapping multiple indexes to a single page. #36

Open PaulHMason opened 8 years ago

PaulHMason commented 8 years ago

This is a proposed feature request.

I'm using iron-pages to distribute view content into multiple areas of a page, using a shared string index, but in some areas I want to use the same content for multiple views (rather than duplicate it). Basically, I want to do something like this in a custom element:

<iron-pages selected="{{selectedView}}" attr-for-selected="view">
  <content select=".area1"></content>
</iron-pages>

<iron-pages selected="{{selectedView}}" attr-for-selected="view">
  <content select=".area2"></content>
</iron-pages>

Where content is distributed into two iron-pages elements based on the area1 and area2 selectors. For each of the two areas I have to provide a home, settings and add content, but I'd like to, for example, use the same area2 content for both the home and add view. i.e. iron-pages will display the same content for both indexes.

<!-- BEGIN Area 1 Content -->
<div class="area1" view="home">
    Something
</div>

<div class="area1" view="settings">
    Something
</div>

<div class="area1" view="add">
    Something
</div>
<!-- Area 1 Content -->

<!-- BEGIN Area 2 Content -->
<div class="area2" view="home,add"> <-- << I WANT TO BE ABLE TO DO THIS -->
    Something
</div>

<div class="area2" view="settings">
    Something
</div>
<!-- Area 2 Content -->
IchordeDionysos commented 7 years ago

Jap this is really a thing.

As Polymer already has so many nodes in your DOM tree. I don't want to add another custom element just for an alias in iron-pages.