Question

由于以下问题，我现在卡住了几天。我的用例是我有一个包含数百万个地址的数据库。从Web应用程序我想搜索它们，显示结果列表，然后显示有关单个地址的信息。一个重要目标是将搜索条件表示为URL的一部分。这样，用户可以返回到先前的搜索，甚至可以通过操纵URL来构建搜索。所以我希望有这样的网址：

http://localhost/#/searchresults?lastname=king&firstname=stephen&city=somecity

我无法设置路由器来处理这些类型的URL。所有的尝试都以死路结束。如何让ember进入/ searchresults路由，以及如何使用RESTAdapter转发那些过滤器标准？

Answer 1

基于直觉像素的答案，我提出了以下解决方案。

我构建了以下URL： http://somedomain.com/#/searchresults/?lastname=king&firstname=stephen&city=somecity

此处不描述构建此URL的方式。在我的情况下，我使用自己的视图与表单和一些事件处理程序。

我工作的代码如下：

App.Router.map(function() {
    this.resource("searchresults", { path: '/searchresults/:dynamic' });
});

App.SearchresultsRoute = Ember.Route.extend((function() {
    var deserializeQueryString = function (queryString) {
        if(queryString.charAt(0) === "?")
            queryString = queryString.substr(1);

        var vars = queryString.split('&'),
            i = 0, length = vars.length,
            outputObj = {};

        for (; i < length; i++) {
            var pair = vars[i].split('=');
            outputObj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
        }
        return outputObj;
    };

    return {
          model: function(param) {
            var paramObj = deserializeQueryString(param.dynamic);
            return App.Searchresult.find(paramObj);
          }
        };
    })()
);

App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.create({
        namespace: 'api'
    })
});

App.Searchresult = DS.Model.extend({
    lastname: DS.attr('string'),
    firstname: DS.attr('string'),
    street: DS.attr('string'),
    hno: DS.attr('string'),
    zip: DS.attr('string'),
    city: DS.attr('string'),
    country: DS.attr('string'),
    birthdate: DS.attr('string')
});

这会为我的REST API生成HTTP GET请求：

http://somedomain.com/api/searchresults?lastname=king&firstname=stephen&city=somecity

我的REST API响应：

{"searchresults":
    [{"id":"2367507","lastname":"King","firstname":"Stephen","street":"Mainstreet.","hno":"21" ...},
     {"id":"3222409","lastname":"King","firstname":"Stephen","street":"Broadway","hno":"35" ...}
    ]}

然后使用此模板可视化：

<h2>Searchresults</h2>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Street / Hno</th>
            <th>City</th>
            <th>Birthyear</th>
        </tr>
    </thead>
    <tbody>
    {{#each item in controller}}
        <tr>
            <td>{{item.firstname}} {{item.lastname}}</td>
            <td>{{item.street}} {{item.hno}}</td>
            <td>{{item.zip}} {{item.city}}</td>
            <td>{{item.birthdate}}</td>
        </tr>   
    {{/each}}
    </tbody>
</table>

如果有人发现更优雅的方式，那就不需要使用自定义反序列化器，我很乐意更新解决方案。由（另一个）Daniel提供的答案表明http://somedomain.com/#/searchresults/king/stephen/somecity对我的案例并不具有特殊性，因为在我需要的解决方案中，我有超过10种不同的搜索标准/过滤器。用户通常只选择填写其中的一些。

此示例基于ember-data revision：12和Ember 1.0.0-RC.3

Answer 2

要利用余烬数据，您可以这样做。假设你有这样的模型：

App.SearchResult = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  city: DS.attr('string')
});

然后你在Route的模型钩子中执行此操作：

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params){
    return App.SearchResult.find({firstName:params.firstName,lastName:params.lastName,city:params.city})
  }
});

这样RESTAdapter会自动发出类似你的例子的请求：

http://localhost/#/searchresults?firstname=xxx&lastname=xxx&city=xxx

希望有所帮助

Answer 3

我有一个URL，其中包含有关新闻页码的信息，并根据它发送和ajax调用。我的路由器看起来像：

App.Router.map(function() {
    this.resource('news', { path: '/n/:id' });
});

但你也可以这样做：

App.Router.map(function() {
        this.resource('searchresults', { path: '/searchresults/:lastname/:firstname/:city' });
    });

您的网址将如下所示：

http://localhost/#/searchresults/king/stephen/somecity

然后你只需指定：

App.SearchresultsRoute = Em.Route.extend({
    model: function(params) {
        var lastname = params.lastname;
            var firstname = params.firstname;
            var city = params.city;
            someFunction(lastname, firstname, city);
    }
});

我希望我的回答对你有帮助。祝你有愉快的一天！

带有动态过滤器/搜索标准的灰烬路线

3 个答案: