本文介绍了具有动态滤波器/搜索条件的Ember路由的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

出现以下问题时,我已经陷入困境了几天。我的用例是我拥有数百万个地址的数据库。从网络应用程序我想要搜索它们,显示一个列表,然后显示一个地址的信息。一个重要的目标是将搜索条件表示为URL的一部分。这样,用户可以回到以前的搜索,甚至通过操纵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?

推荐答案

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

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

我构造了以下URL:

I construct the following URL: 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>

如果有人找到一个更优雅的方式,那不需要使用自定义的解串器,我会很高兴更新解决方案。 (另一方)提供的答案建议对于我的情况来说不是对的,因为在我需要的解决方案中,我有超过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 revision:12和Ember 1.0.0-RC.3

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

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

10-27 19:18