javascript - Ember JS : Issue with Query Params for a Route and Backward Navigation

Question

("ember-cli": "2.2.0-beta.6")

我有一个搜索页面，可以搜索两种类型的记录:用户或组织。

此页面的路径是 /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 在表格中显示相关信息。

我最初确实可以从不同的路线搜索用户和组织，但从用户体验的 Angular 来看，折叠到单个 View 是有意义的。

我遇到的确切问题是单独的路线也有问题。

我真的对此感到迷失，非常感谢提供的任何帮助!!

Answer 1

我不知道这是否有帮助，但它看起来像在 search/controller.js 中，您的 linkToTarget 计算了两种类型之间的属性标志，users 和组织。

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

但是，在您的 search/template.hbs 中，您似乎将值 roles 传递到您的组织按钮中。

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

您是否可能在代码的其他地方混淆了这两者？ (在“Angular 色”和“组织”之间)只是一个想法。