1

我正在尝试在 ember.js 中完成 URL 哈希上下文搜索。到目前为止，我已经在阅读文档和观看教程方面取得了相当大的进展，但现在我被困住了。

问题：

当我访问时/#/search/movie/bob，它检测到它应该正在搜索电影并在 TMDB（电影数据库）API 上执行查询并提取电影。当我在浏览器的地址栏中更改bob为时lord，路线再次转换并执行搜索。当我在该/search/:type/:query状态下使用 HTML 搜索输入字段再次搜索时，会出现此问题。statemanager 不再调用路由。

这是我的路由器：

    App.Router = Ember.Router.extend({
      enableLogging: true,
      root: Ember.Route.extend({
        showSearchResults: Ember.Route.transitionTo('searchResults'),
        index: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router) {
            router.get('applicationController').connectOutlet('search');
          }
        }),
        searchResults: Ember.Route.extend({
            route: '/search/:type/:query',
            serialize: function(router, params) {
              // App.SearchModel gets its values set by
              // the bindAttr helper in the handlebar
              // template
              return {
                type: App.SearchModel.get('type'),
                query: App.SearchModel.get('inputValue')
              }
            },
            connectOutlets: function(router, params) {
              var type = null;
              var query = null;
              var searchController = router.get('searchController');

              if (params && params.type && params.query) {
                type = params.type;
                query = params.query;

                // make sure the SearchModel has its
                // properties set to be able to display them
                // properly in the search fields
                App.SearchModel.set('type', type);
                App.SearchModel.set('inputValue', query)
              } else {
                type = App.SearchModel.get('type');
                query = App.SearchModel.get('inputValue');
              }

              // display the search bar again
              router.get('applicationController').connectOutlet('search');

              // perform a search against an API
              searchController.search(type, query, function(data) {
                  router.get('applicationController').connectOutlet('search_results', 'searchResults', data);
              });
            }
          })
        })
    });

这是车把模板：

     <script type="text/x-handlebars" data-template-name="search-view">
        {%  verbatim %}
            <form class="form-inline">
                {{view Ember.TextField valueBinding="App.SearchModel.inputValue" class="span7" placeholder="Search Movies - TV Shows ..." }}
                <input type="hidden" {{bindAttr value="App.SearchModel.type"}} />
                <button type="submit" class="btn btn-large" {{action showSearchResults on="click"}}>Search</button>
            </form>
        {% endverbatim %}
    </script>

当您单击提交按钮时showSearchResults，只要您之前没有完成搜索，它就会调用和转换。如果我处于初始/状态，这会正确发生，但如果我处于状态则不会/search/:type/:query。

我是否需要操纵哈希位置以使其再次转换？或者有没有更好的惯用方式告诉 ember 当我单击搜索按钮时它应该改变:query所以状态改变？

更新：

我让它工作了，但是感觉真的很hacky ..一定有更好的方法吗？这是我的解决方案：

    showSearchResults: function(router, e, b) {
      // set the hash location so it knows to transition
      // to searchResults correctly .. this feels very
      // hacky ..
      var hashLocation = Ember.HashLocation.create();
      hashLocation.setURL('/search/%@/%@'.fmt(
        App.SearchModel.get('type'),
        App.SearchModel.get('inputValue')
      ));
      router.location = hashLocation;
      router.transitionTo('searchResults');
    }
4

0 回答 0