javascript - Data-bind link doesn't open web page in Ungerboeck

Question

I am using a system called Ungerboeck to setup a web store. The app allows me to place custom HTML code inside a section called <!--TOPPAGE-->. This is code placed above their system navigation menu and the stores main content.

This is what a standard link looks like in the main stores content page.

<a class="readMore" data-bind="click: function() {runCode('openPage', 2232)}">Read More</a>

I tried to add this type of code to my custom bootstrap navigation but the link does not work.

I tried using the same code from the left-side navigation which the Ungerboeck system generates for the top navigation I made.

<li data-bind="attr: { class: panelCss }" data-view="public/controls/NavigationLinks/NavigationLinks" class="ux-nav--link ws-Links-CurrentLinkTextColor ux-navLevel-1" data-active-view="true" style="">
<!-- ko if: hasChildren --><!-- /ko -->
<a class="menu-link ws-Links-LinkTextColor" data-bind="attr: { href: url, id: 'navLink' + sequence() }, css: { 'ws-Links-LinkTextColor': !lastClicked(), 'ws-Links-CurrentLinkTextColor': lastClicked(), isSelected: lastClicked()}, click: linkClicked, text: description" target="_blank" data-track="true" href="" id="navLink288">Show Information</a>
<!-- ko if: hasChildren --><!-- /ko -->
</li>

But when added to my navigation menu, the link refreshes the site.

Question

How can I add links to my navigation menu that can link to a page within my site?

Webpage: https://ecommerce.sourceoneevents.com/prod/app85.cshtml?aat=E0jDDZomlL5TBOB6hWHMAz5j7IJY9TtwYxMQnlnL0Y4%3d

Codepen Example: https://codepen.io/CookieFresh89/pen/KKMVLOm

Update 1/20/2021 from Ungerboeck

After discussing with the team, I can confirm that embedding those “data-bind=….” snippets into the web skin won’t work for you or other ESC customers. The web skin HTML is not processed for Knockout bindings for security, complexity, and performance reasons. On top of that, we couldn’t make the “runCode….” snippets functional at the web skin level as that code is specific to the store pages themselves. Lastly, since the web skin loads before anything else and shows all the time, there would be many instances where a link such as this couldn’t work since the store, and thus the page to navigate to, hasn’t even loaded yet, like on the sign-in page.

Answer 1

After updating the post, it's clear that you can't use normal <a href=''> elements, and also can't use them with data-bind, which of course has a custom implementation internally in their system, so you can add your custom way to navigate as well,

you can try something different to not override anything from their side, also you don't need it to be complex like their example,

ex:

add data-href for your <a> elements, with the path/url as a value

    <a data-href="/some-path">Read More</a>

and then in your js:

    document.querySelectorAll('a[data-href]').forEach(item => {
      item.addEventListener('click', (event) => {
        window.open(item.dataset.href, '_self');
      });
    });