CODEWITHSUNDEEP
ember.js
user3618466
user3618466

Reputation:

Debounce search filter

I'm trying to debounce my search function but I get an error. I have an ember search input and this in my array controller:

App.PostsController = Ember.ArrayController.extend({
    watchSearch: function() {
      Em.run.debounce(this, this.itemsa, 400);
    }.observes("search"),

    itemsa: function() {
      var searched = this.get("search") ? this.get("searchedItems") : this;
      return searched;    
    }.property("searchedItems"),

  searchedItems: function() {
    var search = this.get('search').toLowerCase();
    return this.filter(function(item) {
      return item.get('title').toLowerCase().indexOf(search) != -1;
    })
  }.property('search', 'title')
});

And in my template I have:

<script type="text/x-handlebars" id="posts">
  {{#each itemsa}}
    {{title}}
  {{/each}}
</script>

Upvotes: 1

Views: 1655

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

debounce should call a function, not a computed property.

App.PostsController = Ember.ArrayController.extend({
    watchSearch: function() {
      Em.run.debounce(this, this.runSearch, 400);
    }.observes("search"),

    runSearch: function(){
      this.set('nextSearch', this.get('search'));
    },

    itemsa: function() {
      var searched = this.get("search") ? this.get("searchedItems") : this;
      return searched;    
    }.property("searchedItems"),

  searchedItems: function() {
    var search = this.get('search').toLowerCase();
    return this.filter(function(item) {
      return item.get('title').toLowerCase().indexOf(search) != -1;
    })
  }.property('nextSearch', 'title')
});

Examples

Upvotes: 2

Related Questions