如何在beforeModel中使用Ember查询参数并选择?

时间:2021-05-30 11:13:12

Demo: http://jsbin.com/zexopa/1/edit?html,js,output

I use the query parameters in my application. And the queryParameters are 'name' and 'category'.

我在我的应用程序中使用查询参数。 queryParameters是'name'和'category'。

The 'name' parameter is used in the select and the 'category' uses the input, but there is something wrong with the select 'name' if I set it default to null.

'name'参数用于select,'category'使用输入,但如果我将其设置为null,则select'name'有问题。

If I change the 'name', the 'name' always is undefined in the url.

如果我更改“名称”,则网址中的“名称”始终未定义。

Route:

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.controllerFor('index').set('products', [1,2,3]);
  },
  model: function() {
    return [{'is_active':false, 'name':'One'}, {'is_active':false, 'name':'Two'}, {'is_active':false, 'name':'Three'}, {'is_active':false, 'name':'Four'},{'is_active':false, 'name':'Five'}];
  },
  actions: {
    queryParamsDidChange: function() {
      this.refresh();
    }
  }
});

Controller:

App.IndexController = Ember.Controller.extend({
  queryParams: ['name', 'category'],
  name: null,
  category: null
});

Template:

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

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{view "select" content=products value=name prompt="all"}}
  {{input type="text" value=category class="form-control"}}
  <ul>
    {{#each model as |item|}}
      <li>{{item.name}}</li>
    {{/each}}
  </ul>
</script>

Can you help to check what happens to my application?

你能帮忙检查一下我的申请会发生什么变化吗?

1 个解决方案

#1


Query params must be string to be properly binded. Your input works, as the value is String object. In name array you provided Integer. Unfortunately, I have not found any mention about that in docs, but you can see a working demo here: http://jsbin.com/lixili/1/edit?html,js,output

查询参数必须是字符串才能正确绑定。您的输入有效,因为值是String对象。在名称数组中,您提供了Integer。不幸的是,我没有在文档中找到任何提及,但你可以在这里看到一个工作演示:http://jsbin.com/lixili/1/edit?html,js,output

If I can give you some tip about your code:

如果我能给你一些关于你的代码的提示:

  • beforeModel is not a place for setting controller properties, do it in setupController method as in JSBin provided
  • beforeModel不是设置控制器属性的地方,请在setupController方法中执行,如JSBin提供的那样

  • You did not defined query params in route, but you could and get rid of the queryParamsDidChange
  • 您没有在路由中定义查询参数,但您可以删除queryParamsDidChange

Hope I helped!

希望我帮忙!

#1


Query params must be string to be properly binded. Your input works, as the value is String object. In name array you provided Integer. Unfortunately, I have not found any mention about that in docs, but you can see a working demo here: http://jsbin.com/lixili/1/edit?html,js,output

查询参数必须是字符串才能正确绑定。您的输入有效,因为值是String对象。在名称数组中,您提供了Integer。不幸的是,我没有在文档中找到任何提及,但你可以在这里看到一个工作演示:http://jsbin.com/lixili/1/edit?html,js,output

If I can give you some tip about your code:

如果我能给你一些关于你的代码的提示:

  • beforeModel is not a place for setting controller properties, do it in setupController method as in JSBin provided
  • beforeModel不是设置控制器属性的地方,请在setupController方法中执行,如JSBin提供的那样

  • You did not defined query params in route, but you could and get rid of the queryParamsDidChange
  • 您没有在路由中定义查询参数,但您可以删除queryParamsDidChange

Hope I helped!

希望我帮忙!