更改滑块范围时，queryParams刷新模型

Question

基本上我有一个有很多标准的搜索模型。现在我正在设置一个范围滑块以过滤最小值和最大值的价格，如下图所示，我想在我更改滑块值时随时刷新模型。知道怎么做吗？我复制了一些我的代码：

# route.js.coffee
App.BooksRoute = Ember.Route.extend
  queryParams:
    page:
      refreshModel: true
    min_price:
     refreshModel: true
    max_price:
     refreshModel: true

# template.hbs
<div class="row">
   <div id="price-slider"></div>
</div>
<div class="row">
  <div id="min_price">{{min_price}}</div>
  <div id="max_price" class="right">{{max_price}}</div>
</div>

谢谢，

Answer 1

我终于解决了它为滑块创建一个单独的视图，我把我的解决方案放在这里也许可以帮助某人：

# route.js.coffee
App.BooksRoute = Ember.Route.extend
  queryParams:
    page:
      refreshModel: true
    min_price:
     refreshModel: true
    max_price:
     refreshModel: true

# controller.js.coffee
  queryParams: ['min_price', 'max_price']
  min_price: 0
  max_price: 200

# template.hbs
 <div class="row">
   {{slider-price min_price=min_price max_price=max_price}}
 </div>
 <div class="row">
   <span id="min_price">{{min_price}}</span>
   <span id="max_price" class="right">{{max_price}}</span>
 </div>

 # slider_price_view.coffee.js
 SearchMap.SliderPriceView = Ember.View.extend

 attributeBindings: ['min_price', 'max_price']

 didInsertElement: ->
   self = this
   @$().slider
     range: true
     min: 0
     max: 200
     values: [@get('min_price'), @get('max_price')]

   @$().on 'slide', (event, ui) ->
     $('#min_price').html ui.values[0]
     $('#max_price').html ui.values[1]

   @$().on 'slidestop', (event, ui) ->
     self.set('min_price', ui.values[0])
     self.set('max_price', ui.values[1])

   Ember.Handlebars.helper('slider-price', SearchMap.SliderPriceView) 