Ember 查询参数

由 ubuntu的疯狂 创建， 最后一次修改 2017-01-06 查询参数是在URL的问号（？）右边部分，通常是键值对形式出现。http://example.com/articles?sort=ASC&page=2比如这个URL的查询参数有两个，一个是sort，一个是page，它们的值分别是ASC和2。1，指定查询参数查询参数通常是声明为controller类中。比如在当前活动路由articles下，你需要根据文章的类型category过滤，此时你必须要在controller内声明过滤参数category。使用Ember CLI新建一个controller、route：ember g controller article；ember g route articles;// app/controllers/articles.jsimport Ember from 'ember';export default Ember.Controller.extend({ queryParams: ['category'], category: null});绑定一个查询参数到URL，并且参数的值为null。当你进入路由articles时，如果参数category的值发生变化会自动更新到controller中的category；反之亦然。你可以设置一个默认值，比如把category设置为Java。可以在模板上获取这个值。{{outlet}}category = {{category}}执行http://localhost:4200/articles，页面会显示出 category = Java。如果执行http://localhost:4200/articles?category=PHP，那么页面会显示category = PHP。下面代码演示了怎么使用查询参数：// app/controllers/articles.jsimport Ember from 'ember';export default Ember.Controller.extend({ queryParams: ['category'], category: null, // 定义一个返回数组的计算属性，可以直接在模板上遍历 filteredArticles: Ember.computed('category', 'model', function() { var category = this.get('category'); var articles = this.get('model'); if (category) { return articles.filterBy('category', category); } else { return articles; } })});创建一个计算属性，这个计算属性是一个数组类型。由于是计算属性，并且这个计算属性关联了另外两个属性category和model，只要这两个属性其中之一发生改变都会导致filteredArticles发生改变，所以返回的数组元素也会跟着改变。在route初始化测试数据。// app/routes/article.jsimport Ember from 'ember';export default Ember.Route.extend({ model(params) { return [ { id: 1, title: 'Bower: dependencies and resolutions new', body: "In the bower.json file, I see 2 keys dependencies and resolutionsWhy is that so? I understand Bower has a flat dependency structure. So has it got anything to do with that ?", category: 'java' }, { id: 2, title: 'Highly Nested JSON Payload - hasMany error', body: "Welcome to the Ember.js discussion forum. We're running on the open source, Ember.js-powered Discourse forum software. They are also providing the hosting for us. Thanks guys! Please use this space for discussion abo… read more", category: 'php' }, { id: 3, title: 'Passing a jwt to my REST adapter new ', body: "This sets up a binding between the category query param in the URL, and the category property on controller:articles. In other words, once the articles route has been entered, any changes to the category query param in the URL will update the category property on controller:articles, and vice versa.", category: 'java' } ]; }});下面看看怎么在模板显示数据，并且根据category显示不同数据。<div class="col-md-4 col-xs-4"><ul> 输入分类：{{input value=category placeholder ='查询的分类'}}</ul><ul> {{#each filteredArticles as |item|}} <li> {{#link-to 'articles.article' item}} {{item.title}}--{{item.category}} {{/link-to}} </li> {{/each}}</ul></div><div class="col-md-8 col-xs-8">{{outlet}}</div>精彩的时刻到了！！先执行http://localhost:4200/articles，此时显示的是所有类型的数据。如下图：接着你就可以做点好玩的事了，直接在输入框输入分类名。由于计算属性的特性会自动更新数组filteredArticles。所以我们可以看到随着你输入字符的变化显示的数据也在变化！这个例子也说明了Ember计算属性自动更新变化的强大！！用着确实爽啊！！官网教程没有说怎么在模板中使用，讲得也不是很明白，就给了一句Now we just need to define a computed property of our category-filtered array that the articles template will render:”也有可能是我看不懂，反正摸索好一阵子才知道要这么用！！2，使用link-to指定查询参数link-to助手使用query-params子表达式直接指定查询参数，需要注意的是这个表达式需要放在括号内使用，切记别少了这个括号。……<ul> {{#link-to 'articles' (query-params category='java')}} java {{/link-to}} <br> {{#link-to 'articles' (query-params category='php')}} php {{/link-to}} <br> {{#link-to 'articles' (query-params category='')}} all {{/link-to}}</ul>……在显示数据的ul标签后面新增上述两个link-to助手。它们的作用分别是指定分类类型为java、php、全部。但用户点击三个连接直接显示与连接指定类型匹配的数据（并且查询的输入框也变为链接指定的类型值）。比如我点击了第一个链接，输入显示如下图：3，路由转换route对象的transitionTo方法和controller对象的transitionToRoute方法都可以接受final类型的参数。并且这个参数是一个包括一个key为queryParams的对象。修改前面已经创建好的路由posts.js。// app/routes/posts.jsimport Ember from 'ember';export default Ember.Route.extend({ beforeModel: function(params) { // 转到路由articles上，并且传递查询参数category，参数值为Java this.transitionTo('articles', { queryParams: { category: 'java' }}); }});执行http://localhost:4200/posts后，可以看到路由直接跳转到http://localhost:4200/articles?category=java，