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 1.8.1+ については、以下の Michael Lang のコメントを参照してください。
Myslik の回答 (まったく使用せずlink-to、代わりにactionand thenを使用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);
}
});
次に、実行するアクションと、Handlebars でアクションを渡す対象を指定できます。
<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）
これらの組み合わせはいずれも Ember.js では機能しませんが、これら 2 つのヘルパーを組み合わせる必要はありません。アクションヘルパーを使用して、コントローラーまたはルートにバブリングさせてみませんか? transitionToRouteそこでは、コントローラーまたはtransitionToルートで使用できます。
たとえば、コントローラーでは、次のようなコードを使用できます。
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>
リンクが発生し、クリックがアクション ハンドラーにバブリングします。(間接的ではありますが) hereに文書化されています。
編集：リンクタグを開く際の構文を修正
Cereal Killer のアプローチはシンプルで気に入っていますが、残念ながら私には問題があります。ブラウザが別のルートに移動すると、Ember アプリケーションが再起動します。
Ember 2.6 では、次の簡単な方法でうまくいきます。
<span {{action 'closeNavigationMenu'}}>
{{#link-to 'home' preventDefault=false}}
Go Home
{{/link-to}}
</span>
これにより、次のことが達成されます。
同じ問題を抱えていたので、この簡単な解決策を見つけました：
{{#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: []
});
setupControllerEmber の link-to タグはルートを使用して新しいビューを開くため、コントローラー アクションではなくターゲット ルートのメソッドで、リンクの 'action' 属性に入れたい機能を実行できます。
Ember ガイドのこちらを参照してください: http://emberjs.com/guides/routing/setting-up-a-controller/
ただし、これは、特定のリンクではなく、ルートにアクセスするたびにアクションを実行したい場合にのみ機能します。
controller.set('model', model);そこに入れる他のものと一緒に行を含めるようにしてください。