Simple search with Emberjs not working

Question

I am trying to implement a simple search feature, which will filter the results and update the listing.

I tried almost every single tutorial out there, every tutorial seems to be working with its jsfiddle but when I apply the same thing on my project, it does not work at all.

Here is what I am having as a first problem, my search field does not seems to be bound with computed property in controller.

I also tried it as a component but again same issue, if I type anything in search field it does not reflect anything.

Let me share my code here,

input type="text" value=searchText placeholder="Search..."

  searchResults: ( ->
    console.log "On every key press it should come here.."
    model = @get('model')
    searchText = @get('searchText')
    filterByPath = @get('filterByPath')
    visualPath = @get('visualPath')

    if searchText
      searchText = searchText.toLowerCase()
      model = model.filter(item) ->
      Ember.get(item, filterByPath).toLowerCase().indexOf(searchText)>= 0
      model.getEach(visualPath)

    ).property('searchText')

Tried almost the same thing with component, but no luck so far. I am not using handlebars but Emblemjs.

Answer 1

You actually need to use computed property in template if you want it to be compiled, then recompiled etc. It is somewhat lazily evaluated so you can't debug that without using this in template first or calling from JavaScript code. So basically you need to use searchResults in your template first.

In demo there was model instead of searchResults. I guess in your application you have similiar setup and same bug.

Fix:

{{#each searchResults as |item|}}
    <li>{{item}}</li>
{{/each}}

Working demo.