Question

我使用ember.js实现内容过滤器，我需要在URL中保存过滤器状态。我怎么能这样做？

我依赖本节http://guides.emberjs.com/v1.12.0/routing/query-params/并尝试执行该代码 http://output.jsbin.com/cixama/4 但选择保存在URL中

http://output.jsbin.com/cixama/4#/?pull=undefined

为什么未定义？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dynamic select on Ember.js</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/release/ember.min.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0-beta.18/ember-data.prod.js"></script>
</head>
<body>
  <script type="text/x-handlebars" id="index">
    <form>
      {{view "select" content=model
                      optionValuePath="content.number"
                      optionLabelPath="content.title"
                      value=pull
                      prompt="Choice option"}}
    </form>
  </script>
<script id="jsbin-javascript">
App = Ember.Application.create({});

// ROUTES
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
  }
});

// CONTROLLERS
App.IndexController = Ember.Controller.extend({
  queryParams: ['pull'],
  pull: null,
});
</script>



<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create({});

// ROUTES
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
  }
});

// CONTROLLERS
App.IndexController = Ember.Controller.extend({
  queryParams: ['pull'],
  pull: null,
});</script></body>
</html>

Answer 1

您的问题是有效负载的number属性是整数，而查询参数是字符串。

从下拉列表中选择项目时，会将数值写入pull属性。但是查询参数机制用字符串替换它。下拉列表看到值已更改，查找新值并找不到任何内容。它假定未选择任何值，并将pull设置为undefined。

一种解决方案是使用两个属性：一个将存储原始数值，另一个将是getter / setter计算属性，可以在数字和文本之间进行转换。

<form>
  {{view "select" content=model
                  optionValuePath="content.number"
                  optionLabelPath="content.title"
                  value=currentPull
                  prompt="Choice option"}}
</form>

<p>currentPull: {{currentPull}}</p>

App.IndexController = Ember.Controller.extend({
  queryParams: ['pull'],
  pull:        Ember.computed('currentPull', {
    get: function() {
      return this.get('currentPull');
    },
    set: function(key, value) {
      this.set('currentPull', parseInt(value, 10));
      return value;
    },
  }),

  currentPull: null,
});

演示：http://output.jsbin.com/redefi/2

但更好的解决方案是在您的应用中引入模型层。您有一个pull-request实体，其属性对应于有效负载的属性。然后，您可以在序列化程序中处理number↔text转换，您的业务逻辑将保持简洁和富有表现力。

如何使用Ember.js在URL中保存选择状态？

1 个答案: