CODEWITHSUNDEEP
ember.js
Britt Shroyer
Britt Shroyer

Reputation: 83

How to retrieve form data in Emberjs

This is my first Ember App and I could really use some help. I have created a sign in page on which there are two input fields for each player's name. The goal is to capture each name upon clicking submit and pushing them to a model (or store?) so I can retrieve them from another template.

Here is the form template:

{{!-- templates/signin.hbs --}}
<div class="enterNames">
  <h2>Player Sign In</h2>
  <form {{action save on="submit"}} >
    <div class="p1input">
      {{input type="text" valueBinding="p1name" placeholder="Player 1" cols="60" rows="1"}}
    </div>
    <div class="p2input">
      {{input type="text" valueBinding="p2name" placeholder="Player 2" cols="60" rows="1"}}
    </div>
    <button>Submit</button>
  </form>
</div>

Is this something that would be done using a model hook within a route? If so, what would that route look like?

Upvotes: 1

Views: 975

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

You can define p2name property in signin.js controller and bind it to input helper like below,

{{input type="text" value={{p2name}} placeholder="Player 2" cols="60" rows="1"}}

So whenever you type value in text field that value will be available in p2name property. so you can inject this controller in another template by using the below in corresponding controller file,

signCont: Ember.inject.controller('signin')

You can retrieve properties in template using {{signCont.p2name}} and in js file this.get('signCont.p2name'). Remember you can inject controller only in controller not in other places.

EDIT: define property just like defining properties in ember object. I created twiddle for you. do check it out using the /game url

Upvotes: 0

Related Questions