CODEWITHSUNDEEP
ember.js
Rune Jacobsen
Rune Jacobsen

Reputation: 10081

Use and bind {{input}} inside a component

Sorry if this is a silly question. I am in the middle of the steepest part of the Ember learning curve and trying to get a simple app going as a learning tool for myself, and my google-fu is failing me in understanding how to do this;

I have a component that is basically a list of model objects with some filtering options. The filter option relevant to this discussion is a free-text search. I want to have an {{input}} that is is bound to some value that affects the result list whenever it is updated.

{{input type=text value=filterString}}

In my poor understanding of Ember, I would have bound the value of the input to a string property, and have my filteredMatches computed property depend on that. However, if I define that property as such:

filteredMatches: Ember.computed.filter('matches', 'filterString', function(match, index, array) {

I get an error in the console log:

Uncaught TypeError: callback.call is not a function

If I remove the reference to 'filterString', it works as expected, but of course the filtering is not updated when I type something into the input.

So with my limited knowledge of Ember, I am stuck with this; Is the input actually binding to filterString on the controller, not the component? I do not use explicit controllers as I understand they will be going away. If that is the case, how can I have a computed property in my component depend on a controller property?

If that is not the case (i.e. controllers are not involved), how can I bind the input to a component property and react to value changes accordingly?

ember -v
version: 2.3.0-beta.2
node: 5.6.0
npm: 2.14.10
os: win32 x64

Thanks for any help, and again, sorry if this question is stupid!

Edit: Both answers by Kitler and Lux were enlightening and helpful. I chose the one by Lux since it came with a concrete solution, but I wish I could have accepted both. To make up for it I will definitely join the Slack channel. :)

Upvotes: 0

Views: 117

Answers (2)

Lux
Lux

Reputation: 18240

Ember.computed.filter has the signature (dependentKey, callback). Checkout the documentation.

The second argument must be a function. For your use case use a normal Computed Property:

filteredMatches: Ember.computed('matches', 'filterString', {
    get() {
        return get(this, 'matches').filter(item => item.indexOf(get(this, 'filterString')) >= 0)
    }
})

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11303

In times like these where you are unable to find an answer on google the API documentation is the place to be, if you look at the docs for Ember.computed.filter you will notice it only takes 1 dependent key.

In order to deal with your problem is to use Ember.computed along with one of the Ember.Array filter functions.

In the future for such questions consider joining us on the ember community slack channel.

Upvotes: 1

Related Questions