结合linkTo和行动佣工Ember.js(Combine linkTo and action he

我需要linkTo和行动佣工Ember.js结合起来。 我的代码是：

{{#link-to 'index'}}<span {{action 'clear'}}>Clear</span>{{/link-to}}

不过，我想使这是这样的：

{{#link-to 'index' {{action 'clear'}} }}Clear{{/link-to}}

并且：

<li>
    {{#link-to 'support'}}
        <span {{action 'myAction' 'support'}}>Support</span>
    {{/link-to}}
</li>

至：

<li>
    {{#link-to 'support' {{action 'myAction' 'support'}} }}Support{{/link-to}}
</li>

我怎样才能做到这一点？

解

检查我的灰烬2.0兼容 ，OK的搜索引擎优化解决方案的答复。

Answer 1:

灰烬链接行动的插件

我开发这个插件最近与Ember 2.0来解决这个- 2.14+兼容 （！1.13也适用 ）风格，并采取关闭行动/动作名称的优势。 这是OK的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='testAction'}}
  Link to another route
{{/link-to}}

传递参数，你可以用行动：

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

兼容性

自动化测试套件证实，插件与1.13工作到最新的灰烬3个版本。

它的工作原理与释放，β和灰烬的金丝雀版本。

插件GitHub的仓库。 欢迎踊跃投稿。

Answer 2:

更新：请参见下面麦郎的评论为灰烬1.8.1+

（不使用与Myslik的回答问题link-to不惜一切，而是用action ，然后transitionToRoute ）是它的无用的搜索引擎优化 ，搜索引擎机器人会看到什么。

如果你希望你的链接指向被编入索引，这是最简单的了，好好<a href=x>在那里。 这是最好的使用link-to让你的链接网址是保持同步您的路线的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);
  }
});

然后，我可以指定要采取的行动和如何通过在车把上的行动：

<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真正的链接，并按照它。

（还要注意transitionTo现在赞成不赞成的transitionToRoute ）

Answer 3:

这些组合都不会在Ember.js工作，但你并不需要这两个帮手结合起来。 你为什么不只是使用动作助手，让它泡到控制器或路线？ 在那里，你可以使用transitionToRoute在控制器或transitionTo的路线。

例如，在控制器，你可以有这样的代码：

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

Answer 4:

这在1.6.0-beta.5正常工作：

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

该链接会发生，然后点击就会泡到操作处理程序。 它的记录（尽管是间接的） 在这里 。

编辑：在打开链接标签纠正语法

Answer 5:

我喜欢麦片杀手的它的简单的方法，但不幸的是它表现出我的问题。 当浏览器导航到另一条路线， 将重新启动灰烬应用 。

由于灰烬2.6，以下简单的方法做的伎俩：

<span {{action 'closeNavigationMenu'}}> {{#link-to 'home' preventDefault=false}} Go Home {{/link-to}} </span>

这实现了以下内容：

• 导航到路线的“家”
• 行动“closeNavigationMenu”被调用
• 鼠标悬停，浏览器显示链接，将遵循（搜索引擎优化和更好的UX）
• 浏览器导航不会导致灰烬应用程序的重新启动

Answer 6:

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

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

然后，管理在样式表CSS类外部按钮和内部按钮，我确信“内部按钮”被覆盖整个“外部按钮”区域; 在这种方式是不可能在外部按钮点击不点击内部按钮。

这对我来说很有效; 希望它可以帮助...

Answer 7:

这是我如何解决了这个在我们的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: []
});

Answer 8:

Ember的链接到标签使用航线开辟新的意见，这样你就可以执行你希望把在链接的“行动”属性在任何功能setupController目标路线的方法，而不是在一个控制器动作。

见灰烬指南中的位置： http://emberjs.com/guides/routing/setting-up-a-controller/

如果要执行的操作每次路由访问时间，但是这仅适用，而不是与特定的联系。

确保包括controller.set('model', model); 与其他任何你摆在那里沿线。

文章来源: Combine linkTo and action helpers in Ember.js