Advanced Router - HTML in sc-view not appearing about ui-element-samples

[surma]

Not using innerHTML was a conscious decision. Using innerHTML serializes the entire DOM to a string just to deserialize it right after. The current code should be doing exactly the same.

I took the current advanced-router code and changed line 38 of about/index.html to

<sc-view class="view-about visible" route="^/about/(.*)">
  <div>About <a href="x.com">lol</a></div>
</sc-view>

and it still works fine, both on initial page load as well as on navigation.

So I can’t reproduce, but I am curious as to what is going wrong on your end.

[oldergod]

Could you show a not working solution? Maybe fork the repo and show a branch of yours?

[itsMattShull]

Sure: https://github.com/derekshull/styleguide

Should be able to pull it down and run npm install and gulp watch to see what I'm talking about. You can see what I'm talking about. Whenever you choose a link inside the the sidenav look in the console and you'll see that the xhr is pulling in the correct with the proper content inside the element.

[oldergod]

Can you reproduce it with the ui-element-samples code?

[itsMattShull]

Yeah: https://github.com/derekshull/ui-element-samples/tree/gh-pages/router-advanced

If you pull it down, go to the router-advanced folder in terminal, run python -m SimpleHTTPServer 8000, and go to localhost:8000. If you try to go to the About page you'll get nothing, just like my styleguide example. Then if you go to localhost:8000/about you'll see the About content but if you click on Home you won't see that content.

[oldergod]

I see your problem and it does not work because you broke the code.

inside the index.html file, you removed the visible class and added the remote attribute for view-home, and vice-versa for view-about. Here is the diff.
You should not do this, as the index.html is when you access the page via the root /. Fix this and it works fine.

You would need to fix the other html files accordingly as well.

[itsMattShull]

I believe I had it set up properly. I'll have a look. What appears to work is what I did here: #54

By using this.innerHTML = newView.innerHTML; instead of

newView.childNodes.forEach(node => {
    this._view.appendChild(node);
});

this.appendChild(newView.innerHTML);

Seems to work well. Would there be any reason not to do this?

[itsMattShull]

@oldergod I see where you were referring to. I had it mixed up for a bit, but it doesn't appear to be the cause of what I was experiencing.

[surma]

Ah I think I found the issue and I also found a solution 💃

After changing about/index.html:38 to

<sc-view class="view-about visible" route="^/about/(.*)">
  <div>About <a href="x.com">lol</a></div>
  <a href="kek.com">kek</a>
</sc-view>

I could reproduce the issue as in the “kek” link never showed up.

HTMLElement.prototype.appendChild() is a smart beast in that it detaches a node from its previous parent before attaching it to the new one. forEach() doesn’t handle mutating the iterable it is iterating over very well (see this JSBin)

My solution is changing this

      newView.childNodes.forEach(node => {
        this._view.appendChild(node);
      });
      this.appendChild(this._view)

to

      newView.childNodes.forEach(node => {
        this._view.appendChild(node.cloneNode(true));
      });
      this.appendChild(this._view)

@derekshull Do you want to do the honors to fix this in your PR or do you want me to do it?

[surma]

Actually, even better would be:

      while(newView.firstChild) {
         this._view.appendChild(newView.firstChild);
      }
      this.appendChild(this._view);

[itsMattShull]

Great! I'll fix this in my local, test, then change the pull request to reflect the changes. Thanks @surma!

[itsMattShull]

I've made the changes in the pull request. I'll go ahead and close the issue.