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在表中显示相关信息的组件。

我最初确实可以从不同的路线搜索用户和组织，但从UX的角度来看，它可以折叠到单个视图。

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

我真的迷失了这一点，非常感谢所提供的任何帮助!!

Answer 1

我不知道这是否会有所帮助，但在search/controller.js linkToTarget两种类型users和organisation之间的return itemType === 'users' ? 'user' : 'organisation';计算属性标记中看起来很像。

search/template.hbs

但是，在您的roles中，您似乎将值{{#bs-button value='roles'}}Organisations{{/bs-button}}传递到了“组织”按钮。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Meh</title>
    </head>
    <body>
      <h2>Hello</h2>
      <button id="warning" class="btn">Button</button>
      <p>Button id: <span id="show"></span></p>
      <script
        src="https://code.jquery.com/jquery-3.1.1.js">
      </script>
      <script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
      </script>
      <script type="text/javascript">
        $('.btn').click(function(event){
            $("#show").html(event.target.id);
        });
      </script>
    </body>
</html>

你的代码中的其他地方可能会混淆两者吗？（在＆＃39;角色＆＃39;和＆＃39;组织＆＃39;之间）只是一个想法。

EmberJS：路径和后向导航的查询参数问题

1 个答案: