lundi 6 mars 2017

Ember: globally-available search component (and action)?

I want to have a search field inside a component that can be placed anywhere in the app. It can appear on any template, or nested in components. The search form would accept user input (search term) and submit would trigger a search action which transitions to a results template.

Seems simple enough, but I can't figure out how to make an action globally available. And if I could, how do you pass the inputted term to the action in the first place? There's surprisingly little info on how to handle form submits with Ember CLI.

Thus far I've just been submitting a regular form with action='/results'. But that's obviously reloading the app.

I've been messing with creating an action in the index controller like this:

export default Ember.Controller.extend(defaultParams, {
    term: '',
    actions: {
        keywordSearch() {
            this.transitionToRoute('results', { queryParams: { q: this.get('term') }});
        }
    }
});

Then passing a closure action down to my search component, which is nested 2 deep from the index template.

index.hbs:



index-search.hbs (component):



search-field.hbs (nested component):

<form >

<button type="submit">Search</button>
</form>

And that will run the action, but the term is not supplied. How do you supply term to the closure action?

And...do I really need to pass the action down to every single place the search field is going to appear in the app, or is there an easier way to do it?




Aucun commentaire:

Enregistrer un commentaire