Best practice for calling an action on input field submit (button & enter key)

1

Just wondering what the best practice is for calling an action when a user enters data in an input box?

I initially had a button with the action on it, but when I wanted to also call it on enter-key press I figured I could do that by wrapping the input in a form and calling the action to that or else adding a second action to the 's on enter.

What would the best way be? Or is there another way?

2

You can add the action to the form tag with on='submit'.

However, you can setup the action like this:

      <form {{action 'saveBook' book on='submit'}} class="form-inline">
        <div class="input-group">
          {{input value=book.title class='form-control'}}
          <div class="input-group-btn">
            <button type="submit" class="btn btn-success" disabled={{book.isNotValid}}>Save</button>
            <button class="btn btn-danger" {{action 'cancelBookEdit' book}}>Cancel</button>
          </div>
        </div>
      </form>

Source: GitHub - zoltan-nz/library-app: Detailed Ember.js Octane v3.21 tutorial for absolute beginners. https://yoember.com | http://yoember.com

4 Likes
3

Great, this is the way I decided to go alright. Just wanted to check that it was best way to do it.

BTW yoember has been a fantastic resource for me since I started learning ember last month, The best ember tutorial I found. Thank You!

1 Like
4

What if I have this markup inside a custom component and I want to have the method saveBook or cancelBookEdit dynamically set? From my template, I am passing parameters success-submit and cancel-submit but how to set them here?