Ember链接动作附加元件

这是确定的SEO解决方案！

安装附加元件

ember install ember-link-action

用法

您可以将闭包操作作为invokeAction参数传递给{{link-to}}组件：

{{#link-to 'other-route' invokeAction=(action 'testAction')}}
  Link to another route
{{/link-to}}

要将参数传递给操作，可以用途：

{{#link-to 'other-route' invokeAction=(action 'testAction' param1 param2)}}
  Link to another route
{{/link-to}}

兼容性

自动化测试套件确认，插件工程与1.13最新的Ember 3版本。
它适用于Ember的发布版、测试版和金丝雀版。
Addon GitHub repository.欢迎大家投稿。

**更新：**请参阅Michael Lang对Ember 1.8.1+的评论

Myslik的答案（根本不使用link-to，而是使用action，然后transitionToRoute）的问题是，它对SEO毫无用处，搜索引擎机器人将什么也看不到。
如果你想让你的链接指向的内容被索引，最简单的方法是在里面放一个好的旧的<a href=x>。最好使用link-to，这样你的链接URL和你的路径URL保持同步。我使用的解决方案既提供了一个操作来完成这项工作，又提供了一个方便的link-to来索引页面。
我覆盖了Ember.LinkView的一些功能：

Ember.LinkView.reopen({
  action: null,
  _invoke: function(event){
    var action = this.get('action');
    if(action) {
      // There was an action specified (in handlebars) so take custom action
      event.preventDefault(); // prevent the browser from following the link as normal
      if (this.bubbles === false) { event.stopPropagation(); }

      // trigger the action on the controller
      this.get('controller').send(action, this.get('actionParam'));
      return false; 
    }           

    // no action to take, handle the link-to normally
    return this._super(event);
  }
});

然后，我可以在Handlebar中指定要执行的操作以及要传递的操作：

<span {{action 'view' this}}>
  {{#link-to 'post' action='view' actionParam=this}}
    Post Title: {{title}}
  {{/link-to}}
</span>

在控制器中：

App.PostsIndexController = Ember.ArrayController.extend({
  actions: {
    view: function(post){
      this.transitionToRoute('post', post);
    }
  }
}

这样，当我缓存页面的呈现副本并将其提供给索引机器人时，机器人将看到一个带有URL的真实的链接并跟踪它。
(note此外，现在不赞成使用transitionTo，而赞成使用transitionToRoute）

这些组合在Ember.js中都不起作用，但您不需要合并这两个助手。为什么不直接使用action helper，让它冒泡到controller或route呢？在controller中可以使用transitionToRoute，在route中可以使用transitionTo。
例如，在controller中，您可以使用如下代码：

App.PostsController = Ember.ArrayController.extend({
    clear: function () {
        // implement your action here
        this.transitionToRoute('index');
    }
});

这在1.6.0-beta.5中运行良好：

<span {{action "someAction"}}>
  {{#link-to "some.route"}}
    Click Me
  {{/link-to}}
</span>

链接将发生，然后点击将弹出到操作处理程序。

• 编辑：更正了开始链接标记中的语法 *

我喜欢Cereal Killer的方法，因为它很简单，但不幸的是，它给我带来了一个问题。当浏览器导航到另一个路径时，它会 * 重新启动Ember应用程序 *。
从Ember 2.6开始，下面的简单方法就可以实现：
<span {{action 'closeNavigationMenu'}}> {{#link-to 'home' preventDefault=false}} Go Home {{/link-to}} </span>
这实现了以下目的：

• 导航到路线“home”
• 已调用操作“关闭导航菜单”
• 鼠标悬停时，浏览器会显示将被跟踪的链接（用于SEO和更好的用户体验）
• • 浏览器导航不会导致Ember应用程序重启 *

有同样的问题，我发现这个简单的解决方案：

{{#linkTo eng.rent class="external-button"}}<div class="internal-button" {{action "updateLangPath"}} >X</div>{{/linkTo}}

然后，在样式表中管理css类external-button和internal-button，我确保“internal-button”覆盖了整个“external-button”区域;以这种方式，不可能在不点击内部按钮的情况下点击外部按钮。
对我来说效果很好;希望能帮上忙。

这就是我在O'Reilly Ember.js书的演示应用程序中解决这个问题的方法：https://github.com/emberjsbook。
您可以在此处查看完整的源代码：https://github.com/emberjsbook/rocknrollcall
在视图中：

{{#if artistsIsChecked}}
  {{#if artists.length}}
    <h3>Artists</h3>

    <ul class="search-results artists">
      {{#each artists}}
        <li><a {{action 'viewedArtist' this.enid }}>{{name}}</a></li>
      {{/each}}
    </ul>
  {{/if}}
{{/if}}

和控制器：

App.SearchResultsController = Em.ObjectController.extend({
  actions: {
    viewedArtist: function(enid) {
      this.transitionToRoute('artist', enid);
    },
    viewedSong: function(sid) {
      this.transitionToRoute('song', sid);
    }
  },
  needs: ['artists', 'songs'],
  artistsIsChecked: true,
  songsIsChecked: true,
  artists: [],
  songs: []
});

这是在Ember 3.11.0中使用on修改器后的外观。

<LinkTo
  {{on "click" this.recordMetrics}}
  @route="post.see-all"
  @model={{@model}}
  @bubbles={{false}}>
  Link Me
</LinkTo>

显示bubbles只是为了说明LinkTo API。
https://blog.emberjs.com/ember-3-11-released/

Ember的link-to标记使用路径来打开新视图，因此您可以执行任何您想放在目标路径的setupController方法中的链接的'action'属性中的功能，而不是放在控制器操作中。
请参阅Ember指南中的以下内容：http://emberjs.com/guides/routing/setting-up-a-controller/
这仅在您希望每次访问路由时都执行该操作时有效，但与特定链接相反。
请确保包括controller.set('model', model);行沿着您在其中放置的任何其他内容。