(「エンバー-CLI」:「2.2.0-beta.6」)私は2つのタイプのために検索することができ、検索ページを持っているEmberJS:ルートのためのクエリーパラメータで問題と下位ナビゲーション
レコード:ユーザーまたは組織。
このページのルートは/search
です。また、クエリのパラメータを使用して状態を保持し、ブラウザ内で前後のナビゲーションを有効にしようとしました。
ユーザーが選択されていて組織には選択されていない場合に機能します。組織を検索して経路を指定し、戻るを押すと、ランダムなルート(ブラウザの履歴にはアクセスされなかったルート)に戻ります。
検索/ controller.js
export default Ember.Controller.extend({
itemType: 'users',
queryParams: [
{
searchString: {
scope: 'controller',
as: 'term'
}
}
],
searchString: '',
userColumns: [
{
'title': 'Name',
'key': 'name',
'type': 'function',
'handler': (key, document) => {
return document._source.firstname + ' ' + document._source.lastname;
}
},
{
'title': 'Email',
'key': '_source.name',
'type': 'string'
},
{
'title': 'Date Registered',
'key': '_source.created_at',
'type': 'date'
}
],
roleColumns: [
{
'title': 'Name',
'key': '_source.name',
'type': 'string'
},
{
'title': 'Email',
'key': '_source.info.email',
'type': 'string'
},
{
'title': 'Date Registered',
'key': '_source.created_at',
'type': 'date'
}
],
linkToTarget: Ember.computed('itemType', function() {
const itemType = this.get('itemType');
return itemType === 'users' ? 'user' : 'organisation';
}),
columnDefinitions: Ember.computed('itemType', function() {
const itemType = this.get('itemType');
return itemType === 'users' ? this.get('userColumns') : this.get('roleColumns');
})
});
検索/ route.js
export default Ember.Route.extend(AuthenticatedRouteMixin, {
queryParams: { searchString: { replace: true } },
resetController(controller, isExiting) {
if (isExiting) {
controller.set('searchString', '');
}
}
});
検索/ template.hbs
{{#es-generic-search
itemType=itemType
searchString=searchString
columnDefinitions=columnDefinitions
as |section data|
}}
{{#if (eq section 'searchForm')}}
{{#bs-button-group value=itemType type="radio" size="xs"}}
{{#bs-button value='users'}}Users{{/bs-button}}
{{#bs-button value='roles'}}Organisations{{/bs-button}}
{{/bs-button-group}}
{{/if}}
{{#if (eq section 'afterLastHeader')}}
<th></th>
{{/if}}
{{#if (eq section 'afterLastColumn')}}
<td>
{{#link-to linkToTarget data._id}}
<button class="btn btn-default btn-xs">
<i class="fa fa-eye"></i>
</button>
{{/link-to}}
</td>
{{/if}}
{{/es-generic-search}}
{{outlet}}
es-generic-search
は、基本的にElasticsearchクエリを実行した後、columnDefinitionsを使用して関連情報をテーブルに表示するコンポーネントです。
私はもともと別々のルートから検索可能なユーザーと組織を持っていましたが、UXの観点からは単一のビューに崩壊する意味がありました。
私が経験した正確な問題は別々のルートでも問題でした。
私は本当にこれで失われており、本当に助けていただければ幸いです!
答えをいただきありがとうございます。私はこれを二重にチェックしましたが、必要に応じてあります。 es-generic-searchコンポーネントは、単にデータモデルがロール(組織/グループ)であるため、 '組織'ではなく 'ロール'を使用します。私はまだこの問題にうんざりしています。 – kurt343