Магистраль: дросселируйте событие фильтра коллекции на вид

Question

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

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

events: { 
    'keyup #filter' : 'filter_collection' 
} 

filter_collection: function(e) { 
    var el, throttled, value; 

    el = e.currentTarget; 
    value = $(el).val(); 
    this.collection.server_api.filter = value; 
    throttled = _.throttle(_.bind(this.update_collection, this), 5000); 
    throttled(); 
} 

update_collection: function() { 
    var promise, self; 

    self = this; 
    promise = this.collection.fetch(); 
    $.when(promise).then(function() { 
     self.collection.pager(); 
    }); 
} 

Таким образом, функция update_collection вызывается для каждого нажатия клавиши, как это было раньше, не throttle. Я попробовал также с debounce, но все запросы будут просто запускаться после времени ожидания. Что мне не хватает?

Любая помощь приветствуется, спасибо!

Answer 1

Функция, вызываемая каждый раз, когда происходит активация , происходит событие filter_collection, которое само не затухает, тот, который вы создаете внутри, немедленно вызывается и отбрасывается.

Вы должны связать свое событие в задушил функции:

var V = Backbone.View.extend({ 
    events: { 
     'keyup #filter' : 'filter_collection' 
    }, 

    filter_collection: _.throttle(function(e) { 
     var el, throttled, value; 

     el = e.currentTarget; 
     value = $(el).val(); 

     this.update_collection(value); 
    }, 5000), 

    update_collection: function(val) { 
     var promise, self; 
     self = this; 
     promise = this.collection.fetch(); 
     $.when(promise).then(function() { 
      console.log('fetched '+val); 
     }); 
    } 
}); 

Можно, конечно, использовать _.debounce, если вы предпочитаете. И см. http://jsfiddle.net/nikoshr/zWrgW/ для демонстрации

Answer 2

Вы также можете привязываться к событию изменения, а не к клавиатуре.