Building a simple search component

@C4rmond4i wrote:

Hi

In my application I have to build a search component to search for articles via an EAN (European Article Number).

My model looks like the following:

/app/models/article.js
import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    number: DS.attr('number')
});

My backend provides data at articles/8711500019974 or at articles?ean=8711500019974, but if I call only articles/ without any ean the server responses with an error.

I've got an route called ean and an component called ean-view. I use the ember-route-action-helper addon to use Closure Actions in my route.

/app/templates/ean.hbs
{{ean-view article=model findArticle=(route-action 'findArticle')

In my route I load the data and refresh it if the component needs new data like this:

/app/routes/ean.js
import Ember from 'ember';

export default Ember.Route.extend({
    model(ean) {
        if (typeof ean === "object){
            return {};
        } else {
            return this.get('store').findRecord('article', ean);
        }
    },

    actions: {
        findArticle(ean) {
            this.model(ean);
        }
    }
});

This is my components template:

/app/templates/components/ean-view.hbs
{{input value=ean}}
<button type="button" onclick={{action "findArticle"}}>Search</button>
{{article.name}}
{{article.number}}

My components controller looks like the following:

/app/components/ean-view.js
import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        findArticle() {
            this.get('findArticle')(this.get('ean'));
        }
    }
});

I think the main problem is that when my model updates in the route, the component does not get the new data, so my question is, how can I change this?

If you detect any errors or bad practices in my code, please tell me what to change

Posts: 3

Participants: 3

Read full topic