带有动态过滤器/搜索条件的 Ember 路由 [英] Ember route with dynamic filter / search criterias

问题描述

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

With the following problem I got stuck now for days. My use case is that I have a database with millions of addresses. From an web-application I would like to search them, display a list of resuls and later display information about a single address. One important goal is, to represent the search criteria as part of the URL. That way users can go back to previous searches or even construct the search by manipulating the URL. So I would like to have a URL like this:

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

我无法设置路由器来处理这些类型的 URL.所有的尝试都以死胡同告终.如何让 ember 进入/searchresults 路由以及如何使用 RESTAdapter 让它转发这些过滤条件?

I don't manage to setup the router to process these kind of URLs. All a tried ended in a dead end. How to make ember go into the /searchresults route and how to have it forward those filter criterias using the RESTAdapter?

推荐答案

根据intinctivepixel的回答，我想出了以下解决方案.

Based on the answer from intuitivepixel I came up with the following solution.

我构造了以下网址:http://somedomain.com/#/searchresults/?lastname=king&firstname=stephen&city=somecity

此处不描述此 URL 的构造方式.就我而言，我使用我自己的视图和表单和一些事件处理程序.

The way how this URL is contructed is not described here. In my case I use a my own view with a form and some event handlers.

我得到的代码如下所示:

The code that I got working looks like this:

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 请求:

This generates an HTTP GET request to my REST API:

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

我的 REST API 响应:

My REST API responds with:

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

然后使用此模板将其可视化:

And this then gets visualized with this template:

<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 多个不同的搜索条件/过滤器.用户通常只选择填写其中的几个.

If somebody finds a more elegant way, that does not require to use a custom deserializer, I will be glad to update the solution. The answer provided by (the other) Daniel that suggests http://somedomain.com/#/searchresults/king/stephen/somecity is not parctial for my case, since in the solution that I need, I have more than 10 different search criterias / filters. Users usually only choose to fill a few of them.

此示例基于 ember-data 修订版:12 和 Ember 1.0.0-RC.3

This examples base on ember-data revision: 12 and Ember 1.0.0-RC.3

这篇关于带有动态过滤器/搜索条件的 Ember 路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！