web-dev-qa-db-ja.com

Ember.jsでlinkToとアクションヘルパーを組み合わせる

Ember.jsでlinkToとアクションヘルパーを組み合わせる必要があります。私のコードは：

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

どうすればこれを達成できますか？

解決

Ember 2.0互換の答えを確認してください、SEOソリューションのOK。

javascriptember.jshandlebars.jshtmlbarsember-components
30
Daniel Kmak

Ember Link Actionアドオン

これは、SEOソリューションではOKです！

アドオンをインストール

ember install ember-link-action

使用法

クロージャーアクションをinvokeAction paramとして{{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のリリース、ベータ、カナリアバージョンで動作します。

アドオンGitHubリポジトリ。 貢献は大歓迎です。

29
Daniel Kmak

これらの組み合わせはいずれもEmber.jsで機能しませんが、これら2つのヘルパーを組み合わせる必要はありません。アクションヘルパーを使用して、コントローラーまたはルーティングにバブルさせてみませんか？そこで、コントローラでtransitionToRouteを使用するか、ルートでtransitionToを使用できます。

たとえば、コントローラーでは次のようなコードを使用できます。

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

これは1.6.0-beta.5で正常に機能します。

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

リンクが発生し、クリックがアクションハンドラーにバブルアップします。文書化されています（間接的ではありますが） ここ 。

編集：リンクタグを開く際の構文を修正

10
neverfox

Cereal Killerのアプローチはシンプルであるのが好きですが、残念ながら問題があります。ブラウザが別のルートに移動すると、-Ember applicationを再起動します。

Ember 2.6の時点で、次の簡単なアプローチがトリックを行います：

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

これにより、次のことが実現します。

  • 「ホーム」のルートに移動します
  • アクション「closeNavigationMenu」が呼び出されます
  • マウスオーバーで、ブラウザがたどるリンクを表示します（SEOおよびより良いUXの場合）
  • ブラウザナビゲーションでは、Ember appの再起動は行われません
6
bargar

同じ問題を抱えて、私はこの簡単な解決策を見つけました：

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

次に、スタイルシートでCSSクラスの外部ボタンと内部ボタンを管理し、「内部ボタン」が「外部ボタン」領域全体をカバーしていることを確認しました。この方法では、内部ボタンをクリックせずに外部ボタンをクリックすることはできません。

私にとってはうまくいきます。それが役立つことを願っています...

3
Cereal Killer

これが、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: []
});
3
jdcravens

Emberのリンク先タグは、ルートを使用して新しいビューを開くため、コントローラーアクションではなく、ターゲットルートのsetupControllerメソッドのリンクの 'action'属性に入れたい機能を実行できます。

Emberガイド： http://emberjs.com/guides/routing/setting-up-a-controller/ を参照してください。

ただし、これは、特定のリンクではなく、ルートにアクセスするたびにアクションを実行する場合にのみ機能します。

controller.set('model', model);行を、そこに入れる他のものと一緒に含めるようにしてください。

0
pvans