Question

我遇到一个问题，当我单击页面链接（LinkTo）中的链接时，按 Ctrl +单击，它会打开一个新标签，但是控件会转到chrome中的下一个标签，而在IE中，控件停留在同一页面上。我发现chrome中的{{#linkTo "routename" "id"}}..{{/linkTo}}行为是不同的。有人可以帮忙吗？

尝试用锚标签替换，但单击后路线不起作用

const mongoose = require('mongoose'); const { ObjectId } = mongoose.Schema.Types; const productSchema = new mongoose.Schema({ name: { type: String, required: true, minlength: 3, trim: true, }, description: { type: String, trim: true, }, price: { type: Number, required: true, min: 0, }, }); productSchema.index({ name: 'text', description: 'text', }); const Product = mongoose.model('Product', productSchema); module.exports = Product;

Answer 1

我花了一段时间才弄清楚你在问什么，但我想我已经弄明白了

首先，我想指出，此行为与EmberJS无关，并且100％是浏览器行为。您将通过任何链接看到此行为（无论是否使用JavaScript），但我将在下面对此进行详细说明。

因此，当我尝试在Chrome上重新创建您的行为时，我没有看到当我使用 ctrl +单击打开一个新标签时，没有切换自动转到该标签。与我的一位同事讨论此问题时，Chrome中似乎有一个可以更改此行为的设置，所以也许您已经更改了该设置？您可以在Chrome Support Website上看到有关此主题和相关问题的更多讨论。

因此，我提到这不是Ember特有的问题，即使他们不使用JavaScript，您也会在任何网页上遇到此问题。有趣的是，Ember首先使您可以在新选项卡中打开，因为它非常关注URL。如果您查看Ember应用程序上的页面，您会看到它实际上是在放置有效的<a href="/something">Your link here</a>元素中的元素，这意味着您可以通过 ctrl +单击获得良好的行为，而不仅仅是使用应用程序首页打开新标签页。

该问题已作为“我可以问一个问题”第2季第1集的一部分得到回答。如果您希望我们全面讨论此问题，可以在此处查看视频：https://youtu.be/v1rBL5_KPqU

Answer 2

您还可以使用ember-href-插件和车把模板编译器。我使用了“ ember-href-to”插件，它运行良好。您可以在ember-href-to上看到href-to的日常使用。

https://www.npmjs.com/package/ember-href-to

ember-href-to：{{link-to}}的轻量级替代。没有组件，没有类绑定-只有绑定的锚href和单击处理程序。

每次使用{{link-to}}时，都会创建一个视图。通常这很好，但是如果要创建许多此类文件，则性能可能会受到影响。 {{href-to}} 仅创建一个URL，速度比快12倍 {{link-to}}

检出分支标记https://github.com/GavinJoyce/ember-performance/pull/1

用法：

{{#href-to "routename" "id"}}..{{/href-to}}

通过使用它，您不需要传递模型，因为它知道它是什么。您只需要路由名称即可。

这是要安装的Ember CLI插件：

ember install ember-href-to

{{href-to}}与{{link-to}}具有相同的接口，您可以使用它链接到余烬应用程序中的静态和动态路由：

使用说明：

<a href="{{href-to 'index'}}">Go Home</a>
<a href="{{href-to 'contacts.contact' contact}}">View Contact 1</a>
<a href="{{href-to 'contacts.contact' 2}}">View Contact 2</a>
<a href="{{href-to 'contact-us' (query-params section='first')}}">You can also use query params</a>
<a href="{{href-to 'contact-us'}}#first">You can also use fragment identifiers</a>
<a href="{{href-to 'contact-us'}}" data-href-to-ignore>
  If you have a catchall route (this.route('catchall', { path: "/*" })),
  you need to add the attribute "data-href-to-ignore",
  otherwise you will always match it
</a>

Answer 3

我认为，除了使用linkTo帮助程序之外，您最好将这种路由行为纳入相应的JS文件中。然后，您可以对操作进行更多控制，并可以根据加载的浏览器来执行不同的操作。

下面是实现该目标的高级步骤。

添加“动作”助手，而不是如下所示的“ linkTo”助手。

<div {{action 'routeToPage'}}></div>

在JS文件中，捕获该动作并在浏览器检查后执行路由。

actions: {
    routeToPage: function () {
        var route = this.container.lookup('route:application');
        
        if(navigator.userAgent.indexOf("Chrome") !== -1 ) {
        // Loaded inside Chrome Browser
          route.render(routeString, <your params>);
        }
    }
}

我不会在这里解释route.render在EmberJs中的工作方式。如果您需要，我也可以提供帮助。您也可以使用navigator查看其他浏览器。userAgent取决于您的要求。

Ember js #LinkTo标签及其行为

3 个答案:

用法：

这是要安装的Ember CLI插件：

使用说明：