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

Question

由于以下问题,我现在卡住了几天.我的用例是我有一个包含数百万个地址的数据库.从Web应用程序我想搜索它们,显示结果列表,然后显示有关单个地址的信息.一个重要目标是将搜索条件表示为URL的一部分.这样,用户可以返回到先前的搜索,甚至可以通过操纵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>

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

这个例子基于ember-data revision:12和Ember 1.0.0-RC.3