Aurelia eating my Bookmarks

Question

I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).

Something like:

<div id="toc">
   <h1>Table of Contents</h1>
   <ul>
     <li><a href="#section1">Section 1</a><li>
     <li><a href="#section2">Section 2</a><li>
   </ul>
</div>
<div id="section1">
    <h2>Section 1</h2>
    <p>Paragraph Text...</p>
    <p><a href="#toc">Back to Table of Contents</a></p>
</div>
<div id="section2">
    <h2>Section 2</h2>
    <p>Paragraph Text...</p>
    <p><a href="#toc">Back to Table of Contents</a></p>
</div>

When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?

I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors. — LStarky
I'm still working on this issue, and found @LStarky's GistRun (linked below) to be informative- however, I believe that the issue may only be relevant when Aurelia is using pushstate navigation, and that GistRun seems to break when setting that option. The skeleton navigation apps exhibit the same behavior if you change them to use push state and then add an anchor tag with a hash url. I thought perhaps this was a universal issue with pushstate, but tested on a simple html page, and that's not the case. — esmoore68

LStarky LStarky · Accepted Answer · 2016-12-06T23:17:43

I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.

Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.

Update:

That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.

Maybe this GistRun or the more standard <a id= approach will help you.

Aurelia eating my Bookmarks

1 Answers