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

moh 发表于 Dev

莫

基本上，我有一个具有许多条件的搜索模型。现在，我正在设置范围滑块，以如下图所示显示带有最小值和最大值的价格，我想在更改滑块值时随时刷新模型。知道如何制作吗？我复制了部分代码：

# 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>

在此处输入图片说明

谢谢，

莫

我终于解决了此问题，为滑块创建了单独的视图，将解决方案放在这里可能对某些人有所帮助：

# 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) 