Ember で崩れたパスを表示したい。現在のパスを反復するにはどうすればよいですか?
私の意見では、2 つのアプローチがあります。
エンバーウェイ
編集：以下の私の答えを見てください
パンくずリストを表示する現在のステータスで、この質問を最新の状態に保ちます。この質問のリビジョンを参照して、履歴を確認できます。
ここにはいくつかの目標があります。
- ルート変更時にリッスン
- 現在のルートを見つける
- 現在のルートのリストを表示する
- ルート内のステップへの作業リンクを表示する
コントローラ
App.ApplicationController = Ember.Controller.extend({
needs: ['breadcrumbs'],
currentPathDidChange: function() {
path = this.get('currentPath');
console.log('path changed to: ', path);
this.get('controllers.breadcrumbs').set('content',this.get('target.router.currentHandlerInfos'));
}.observes('currentPath')
});
App.BreadcrumbsController = Em.ArrayController.extend({});
ルーター
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function() {
this.render();
this.render('breadcrumbs', {
outlet: 'breadcrumbs',
into: 'application',
controller: this.controllerFor('breadcrumbs')
});
}
});
テンプレート
{{! application template }}
<div class="clearfix" id="content">
{{outlet "breadcrumbs"}}
{{outlet}}
</div>
{{! breadcrumbs template }}
<ul class="breadcrumb">
{{#each link in content}}
<li>
<a {{bindAttr href="link.name"}}>{{link.name}}</a> <span class="divider">/</span>
</li>
{{/each}}
</ul>
現在取り組むべき問題は次のとおりです。
- URL にアクセスする
#/websites/8/pages/1と、ブレッドクラムの出力は次のようになります: (すべてのスクリプト タグ プレースホルダーを削除しました
<ul class="breadcrumb">
<li>
<a href="application" data-bindattr-34="34">application</a> <span class="divider">/</span></li>
<li>
<a href="sites" data-bindattr-35="35">sites</a> <span class="divider">/</span>
</li>
<li>
<a href="site" data-bindattr-36="36">site</a> <span class="divider">/</span>
</li>
<li>
<a href="pages" data-bindattr-37="37">pages</a> <span class="divider">/</span>
</li>
<li>
<a href="page" data-bindattr-38="38">page</a> <span class="divider">/</span>
</li>
<li>
<a href="page.index" data-bindattr-39="39">page.index</a> <span class="divider">/</span>
</li>
</ul>
- URL は有効なルートである必要があります
- メニューはルートにハードコードされています。ここ
{{#linkTo}}のように動的にしようとしましたが、 -observerをトリガーしません。transitionTocurrentPath
反対に
ほとんどは上記と同じですが、いくつかの違いがあります。location.hashブレッドクラムは、ルーターから取得するのではなく、ループすることによって作成されます。
ApplicationControllerは次のようになります。
ApplicationController = Ember.Controller.extend({
needs: ['breadcrumbs'],
hashChangeOccured: function(context) {
var loc = context.split('/');
var path = [];
var prev;
loc.forEach(function(it) {
if (typeof prev === 'undefined') prev = it;
else prev += ('/'+it)
path.push(Em.Object.create({ href: prev, name: it }));
});
this.get('controllers.breadcrumbs').set('content',path)
}
});
ready : function() {
$(window).on('hashchange',function() {
Ember.Instrumentation.instrument("hash.changeOccured", location.hash);
});
$(window).trigger('hashchange');
}
ApplicationRouteでカスタム ハンドラーをサブスクライブする必要があります。
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller, model) {
Ember.Instrumentation.subscribe("hash.changeOccured", {
before: function(name, timestamp, payload) {
controller.send('hashChangeOccured', payload);
},
after: function() {}
});
}
});
これまでのところ、別のアプローチが私には最適ですが、この方法のhistory代わりにを使用するようにルーターを構成すると機能しなくlocation.hashなるため、これは良い方法ではありません。