Модель обновления queryParams при изменении диапазона ползунка

В основном у меня есть модель поиска, которая имеет много критериев. теперь я настраиваю ползунки диапазона для фильтрации цены с минимальным и максимальным значением, как показано на рисунке ниже, я хочу обновлять модель каждый раз, когда меняю значения ползунка. Любая идея, как это сделать? Я копирую некоторые части своего кода:

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

введите здесь описание изображения

Спасибо,


ember.js ember-cli
person Moh    schedule 09.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я, наконец, решил это, создав отдельный вид для ползунка, я поместил свое решение здесь, возможно, кому-то поможет:

# 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) 
person Moh    schedule 12.03.2015