Problem with HTML containing anchor tags with href attributes that point to element IDs.

[gordon-matt]

When the HTML contains anchor tags with an href that points to an element ID. It complains about no such route being defined. The reason I have such markup is because it has Bootstrap tabs. Example:

<a href="#Themes" aria-controls="Themes" role="tab" data-toggle="tab">Themes</a>

Which points to the tab panel as follows:

<div role="tabpanel" class="tab-pane" id="Themes">
    <div class="form-group">
        <label for="DefaultTheme">Default Theme</label>
        <input type="text" id="DefaultTheme" name="DefaultTheme" class="form-control" value.bind="defaultTheme" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="AllowUserToSelectTheme" name="AllowUserToSelectTheme" checked.bind="allowUserToSelectTheme" /> Allow User To Select Theme
        </label>
    </div>
</div>

[gordon-matt]

I have checked in my code to the develop branch on my Aurelia Test Project. If it's helpful for you to see the issue, just clone the repo, setup per instructions, run it and click the "Dynamic HML Test" link in the nav bar. Then choose the "Site Settings" option from the dropdown and click "Get Settings" button to load it. Everything seems fine until you click one of the tabs. Open the console to see the error.

NOTE: I have a bug in this test project, where on first time load it complains about not being able to find the app.html view. I haven't figure out why this is yet, but just ignore this and refresh the page; it will work the second time.

[fkleuver]

This is related to the router. Any anchor tag with an href that starts with # will trigger a router navigation.

Basically you've got 4 options here:

• Use an alternative API in bootstrap if it exists (one that doesn't use href)
• Implement your own click.delegate that shows/hides the tab in question (use Aurelia instead of bootstrap)
• Tell the router to ignore these paths (see Aurelia Router should support ignoreUnknownRoutes-like feature aurelia/router#527 and feat(router config): ignoreUnknownRoutes option aurelia/router#558 which are related)
• Use PushState

Closing this since it's not related to dynamic-html element. This behavior will also occur for static html.

[gordon-matt]

The weird thing is the exact same code works fine in normal views. It's only when getting Aurelia to process this dynamic view that there's a problem. Any idea why that is? Anyway, I will look at the options you've mentioned. Thanks for the help; much appreciated.

[fkleuver]

Now that you mention that, I did notice there were no bootstrap event handlers attached to the anchors so the click events aren't being intercepted. That's probably why it works in static views but not in a dynamic one. You need to tell bootstrap to do something (initialize?) after the dynamic html is compiled.

I just released v0.3.0 which dispatches a compiled event after each compilation. You can listen to it like so:

<dynamic-html
  html.bind="html"
  context.bind="context"
  compiled.delegate="handleCompiled($event)">
</dynamic-html>

handleCompiled($event) {
  const dynamicHtml = $event.detail;
  // this is the dynamic-html element
  const el = dynamicHtml.el;
  // something like this, don't know the exact api constraints
  $(el.querySelectorAll('[data-toggle="tab"]')).tab();
}

[gordon-matt]

The latest version gives a 404 error for /jspm_packages/npm/aurelia-dynamic-html@0.3.0/dynamic-html.js. That file does not exist

[fkleuver]

Sorry about that. I switched to rollup for single file output but that was a bad idea apparently. It should be fixed now with 0.3.1

[gordon-matt]

You sir, are the man. It works perfectly now. You can see it in action if you want on a demo page in my test project here: https://github.com/gordon-matt/aurelia-razor-netcore2-skeleton. Thanks very much.