數據綁定鏈接未在 Ungerboeck 中打開 web 頁面

Question

我正在使用一個名為 Ungerboeck 的系統來設置 web 商店。 該應用程序允許我將自定義 HTML 代碼放置在名為<!--TOPPAGE-->的部分中。 這是放置在他們的系統導航菜單和商店主要內容之上的代碼。

這是主商店內容頁面中標准鏈接的樣子。

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

我試圖將這種類型的代碼添加到我的自定義引導導航中，但鏈接不起作用。

我嘗試使用 Ungerboeck 系統為我制作的頂部導航生成的左側導航中的相同代碼。

<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>

但是當添加到我的導航菜單時，鏈接會刷新站點。

問題

如何將鏈接添加到可以鏈接到我網站內頁面的導航菜單？

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

Codepen 示例： https://codepen.io/CookieFresh89/pen/KKMVLOm

從 Ungerboeck 更新 2021 年 1 月 20 日

在與團隊討論后，我可以確認嵌入那些“data-bind=……”。 web 皮膚的片段對您或其他 ESC 客戶不起作用。 出於安全性、復雜性和性能原因，不處理 web 皮膚 HTML 用於敲除綁定。 最重要的是，我們無法制作“runCode……”。 代碼片段在 web 皮膚級別起作用，因為該代碼特定於商店頁面本身。 最后，由於 web 皮膚在其他任何東西之前加載並一直顯示，因此在許多情況下，諸如此類的鏈接在商店之后無法工作，因此導航到的頁面甚至還沒有加載，就像在登錄頁面上一樣。

Answer 1

更新帖子后，很明顯你不能使用普通的<a href=''>元素，也不能將它們與data-bind一起使用，這當然在他們的系統內部有一個自定義實現，所以你可以添加您的自定義導航方式，

你可以嘗試一些不同的東西而不是從他們身邊覆蓋任何東西，你也不需要像他們的例子那樣復雜，

前任：

為您的<a>元素添加data-href ，並將路徑/url 作為值

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

然后在你的js中：

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