Fatal编程技术网
  • ember.js/
  • Ember.js 带有动态筛选/搜索准则的余烬路径

Ember.js 带有动态筛选/搜索准则的余烬路径

ember.js

Ember.js 带有动态筛选/搜索准则的余烬路径,ember.js,Ember.js,由于以下问题，我被困了好几天。我的用例是我有一个拥有数百万个地址的数据库。我想从web应用程序中搜索它们，显示结果列表，然后显示关于单个地址的信息。一个重要的目标是，将搜索条件表示为URL的一部分。这样，用户可以返回到以前的搜索，甚至可以通过操纵URL来构建搜索。因此，我希望有这样一个URL： http://localhost/#/searchresults?lastname=king&firstname=stephen&city=somecity http://localho

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

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

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

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

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')
});
我无法设置路由器来处理此类URL。所有的尝试都以死胡同告终。如何让ember进入/searchresults路径，以及如何让它使用RestaAdapter转发这些过滤标准？

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

App.Router.map(function() {
    this.resource('news', { path: '/n/:id' });
});
但你也可以这样做：

App.Router.map(function() {
        this.resource('searchresults', { path: '/searchresults/:lastname/:firstname/:city' });
    });
您的URL如下所示：

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

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

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

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')
});
然后您只需指定：

App.SearchresultsRoute = Em.Route.extend({
    model: function(params) {
        var lastname = params.lastname;
            var firstname = params.firstname;
            var city = params.city;
            someFunction(lastname, firstname, city);
    }
});
我希望我的回答对你有帮助。祝你今天愉快

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

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

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

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

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')
});
然后在路线的模型钩子中执行以下操作：

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params){
    return App.SearchResult.find({firstName:params.firstName,lastName:params.lastName,city:params.city})
  }
});
这样，重启适配器将自动发出请求，如您的示例所示：

http://localhost/#/searchresults?firstname=xxx&lastname=xxx&city=xxx
希望能有所帮助

根据直觉像素的答案，我想出了以下解决方案

我构建了以下URL：

此处不描述此URL的构造方式。在我的例子中，我使用一个带有表单和一些事件处理程序的我自己的视图

我得到的代码如下所示：

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

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

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

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响应为：

{"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>

搜索结果
名称
街道/北区
城市
生日
{{{#控制器中的每个项目}
{{item.firstname}{{item.lastname}}
{{item.street}{{item.hno}
{{item.zip}{{item.city}
{{item.birthdate}
{{/每个}}
如果有人找到一种更优雅的方法，不需要使用自定义反序列化器，我将很乐意更新解决方案。（另一个）Daniel提供的答案并不适用于我的案例，因为在我需要的解决方案中，我有10多个不同的搜索标准/过滤器。用户通常只选择填充其中的一小部分

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

我尝试了此操作，但出现了以下错误：“未捕获错误：没有与URL“/searchresults？name=anna”匹配的路由”。我的App.Router.map包含“his.resource（'searchresults'）；”我以为你已经有了动态段：
this.resource（'searchresults'，{path:'/searchresults/：dynamic'}）太棒了。这样我就能让它工作了。将有两个区别：URL现在是…ts/？firstname=x。。。在“？”之前加上破折号。2.在SearchResultsRoute中传递给model（）的参数的结构与示例中所示不同。相反，我得到了{dynamic:“？name=anna”}。因此，另外，我必须反序列化查询字符串。我可以很容易地处理这个问题。很酷，我还认为您必须连接到路由的序列化/反序列化方法，我很高兴它能起作用：）这可能会起作用。然而，我的实际模型和搜索表单要复杂得多。用户可以从10多个字段（名字、姓名、街道、门牌号、生日等）中进行选择。为了进行搜索，用户通常只提供其中几个字段的内容。如果我像这样构造URL，它们总是必须显式地包含所有标准，即使这些字段中的大多数是空的：即。我不喜欢，URL没有“显示”一个职位代表什么。位置3代表街道，看不见。