Displaying content in my main nav/ changing this content

[CragVFX]

Hello,

I am building a desktop app using polymer and so far it has been a blast but, I have hit a roadblock on my project. I am attempting to update the content in the main content div when the user hits the different topics on the side nav. Using the core-scaffold and some of the techniques from the single-page-polymer app example, I have this snippet showing my main div with id="content".

<div layout horizontal center-center fit>

      <core-animated-pages id="pages" selected="{{route}}" valueattr="hash" transitions="slide-from-right">

        <template repeat="{{page, i in pages}}">

          <section hash="{{page.hash}}" layout vertical center-center>

            <div>

            <h1>{{page.name}}</h1>

            <div id="content"></div>

            </div>

          </section>

        </template>

      </core-animated-pages>

    </div>

When someone hits the side nav's it updates the {{route}}, from there I am handling this with the following js:

var that = this;

var pages = document.querySelector('#pages');

that.setContent(pages.selected);

template.setContent = function(view) {

        console.log('setContent');

        if (view === 'one') {

            console.log('dash');

            var content = document.getElementById('content');

            while (content.firstChild) content.removeChild(content.firstChild);

        } else if (view === 'two') {

            console.log('post-view');

            var content = document.getElementById('content');

            while (content.firstChild) content.removeChild(content.firstChild);

            var postView = document.createElement('post-view');

            content.appendChild(postView);

        }  ... etc.

Even if I get the {{route}} as 'two' and even if it matches the if (view === 'two') ... it does not display my content. So how would you all recommend handling this? It seems rather sloppy the way I have it, but I need to clear the main area and then put new content in that main area for each of the side navs. And I know I could just write out each section in the html, but what fun is that.

Help me if you can! 

Thanks!

[Rob Dodson]

It looks like you're repeating multiple elements with <div id="content">. Those are in your Light DOM, they're not in the Shadow DOM, so you're always going to select the very first #content when any of your handlers run.

Follow Polymer 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.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b4c9f403-d08e-4374-a9f8-24bb13b0bba8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.