ember.js 如何处理EmberJs操作中的右键“在新选项卡中打开”?

nlejzf6q  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(109)

我有一个在点击时调用动作的链接,如下所示。我还没有填充href,因为我想在动作中处理这个问题,我不想触发页面重载。
哈佛商学院

<a class="cursor-pointer" {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

JS系统

@action
goToPage(pageName) {
  this.args.pageUpdated('page', pageName.toString());
  // scroll to top of search results
  document.querySelector('.search-summary-title').scrollIntoView();
}

如果用户右键单击并选择“在新选项卡中打开”,是否有方法将用户引导到正确的页面?

k4ymrczo

k4ymrczo1#

您应该将href

<a href={{this.nextPageNumber}} {{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

然后阻止click处理程序中的默认操作:

@action
goToPage(pageName, event) {
  event.preventDefault();

  this.args.pageUpdated('page', pageName.toString());
  // scroll to top of search results
  document.querySelector('.search-summary-title').scrollIntoView();
}

这对于可访问性也要好得多!

hc2pp10m

hc2pp10m2#

经过进一步的研究,我认为这是不可能做到的行动,但我有一个变通办法,如果有人感兴趣。
我不想让href干扰我的操作,所以我不想在我需要它之前填充它。所以我修改了下面的模板,你会看到我添加了另一个运行oncontextmenu的操作。对于那些不知道右键菜单弹出时会发生这个事件的人。
哈佛商学院

<a href="#/" {{on "contextmenu" (fn this.setHref this.nextPageNumber)}} 
{{on "click" (fn this.goToPage this.nextPageNumber)}}>Next</a>

我现在在setHref操作中所做的只是填充href。现在当用户选择新窗口或新标签时,它将转到正确的位置。JS

@action
setHref(pageName, event) {
  event.target.setAttribute('href', `${window.location.pathname}?page=${pageName}`);
}

相关问题