2017-03-16 16 views
0

(「エンバー-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の観点からは単一のビューに崩壊する意味がありました。

私が経験した正確な問題は別々のルートでも問題でした。

私は本当にこれで失われており、本当に助けていただければ幸いです!

答えて

1

これが役立つかどうかは知りませんが、それは二つのタイプ、usersorganisationsearch/controller.jsあなたlinkToTarget計算プロパティフラグのように見えます。

return itemType === 'users' ? 'user' : 'organisation'; 

しかし、あなたの組織のボタンに値rolesを渡すように見えるあなたのsearch/template.hbsに。

{{#bs-button value='roles'}}Organisations{{/bs-button}} 

2つのコードを混在させる可能性がありますか? ( '役割'と '組織'の間)ちょうど考え。

+0

答えをいただきありがとうございます。私はこれを二重にチェックしましたが、必要に応じてあります。 es-generic-searchコンポーネントは、単にデータモデルがロール(組織/グループ)であるため、 '組織'ではなく 'ロール'を使用します。私はまだこの問題にうんざりしています。 – kurt343

関連する問題