带有查询参数的 Ember 路线图 url答案

【问题标题】：Ember route map url with query parameters带有查询参数的 Ember 路线图 url
【发布时间】：2014-08-15 08:50:00
【问题描述】：

这是我的路由配置（route.js 使用 ember-cli）

this.resource('xero-invoices', {path:'/loans/xero/:loan_id/invoices'})

但 ember 在尝试路由此地址时会切断查询字符串。如何解决问题？

【问题讨论】：

标签： ember.js ember-router ember-cli

【解决方案1】：

您的路线定义部分有一个小错字，缺少右花括号，但我认为这不是真正的问题。为清楚起见，此处已固定。

this.resource('xero-invoices', {path:'/loans/xero/:loan_id/invoices'})

上面的资源有一个lone_id 的动态段，而不是一个查询字符串。查询字符串支持目前在 Ember 的 beta 版本中，并且不稳定。您尝试使用的任何查询字符串功能都将在您的控制器中处理。 http://emberjs.com/guides/routing/query-params/

如果您有 jsbin 或更多代码，我可能会更有帮助。

这是一个简单的 jsbin，显示动态段的工作 - http://emberjs.jsbin.com/casana/1/edit

编辑：在您的示例 jsbin 中，您正在尝试使用 link-to 的 (query-parms) 助手，这仅在您使用 Ember 的 beta 版本时可用。在您的应用程序控制器中，如果您将其从应用程序模板中删除，您将不会收到错误消息。在您的路由中，由于您将查询参数作为模型返回，因此可以通过控制器中的 model 属性访问 oauth_token。

来源：http://jsbin.com/bufukiqisika/8/edit

App = Ember.Application.create();

App.Router.map(function() {
    this.resource('xero-invoices', { path:'/loans/xero/:loan_id/invoices' });
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
   return ["red","blue","green"];
  }
});

App.XeroInvoicesRoute = Ember.Route.extend({
  model: function(params) {
     window.console.log(params);
   return params.queryParams["oauth_token"];
  }
});

模板：

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="xero-invoices">
  {{model}}
</script>

示例：http://jsbin.com/bufukiqisika/8#/loans/xero/09870987/invoices?oauth_token=foo

【讨论】：

感谢您的回答。我的代码看起来像这样emberjs.jsbin.com/bufukiqisika/6/edit
但不工作：x。我尝试在控制器中添加 queryParams，但仍然无法正常工作。我应该更新版本还是我必须做什么？
需要明确的是，在这种情况下，您正试图从诸如 /loans/xero/LOAN_ID_123/invoices?oauth_token=foo 之类的 url 获取 oauth_token
但是 oauth_token 是空的

【解决方案2】：

您可以使用在控制器上定义的查询参数。

这样的事情应该可以工作：

MyController = Ember.Controller.extend({
  queryParams: ['searchvalue'],
  searchvalue : null
})

在你的模板中：

{{input type="text" valueBinding=controller.searchvalue}}

因此您的搜索值将在 URL 中表示，例如“…/myapp/seach?searchvalue=foo”

见http://emberjs.com/guides/routing/query-params/

【讨论】：