How to build a form with access to text input values on submit with ember.js

Question

I'm using the latest pre 1.0 of ember.js and wanted to get away from using the deprecated button for simple forms.

I have something that works but I don't feel like this is the correct way to wire up a view that has both a text input and a button that needs access to that text.

Here is the basic view

{{#view PersonApp.AddPersonView}}
       {{view Ember.TextField valueBinding="username"}}
         {{#with this as username}}
           <input type="submit" value="add" {{action addPerson username}}/>
         {{/with}}
{{/view}}

Here is the view

PersonApp.AddPersonView = Ember.View.extend({
  username: null,                                                                                
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      PersonApp.personController.addPerson(username);
      this.set('username', ''); //this does not currently work
    }
  }
});

The only other issue I'm having is that I don't have access to username the usual way. ie - this.get('username') but in addition I can't clear the textbox value (even though it's shown above).

I'm looking to build a modern version of this gist (previous version of ember) https://gist.github.com/1477225

buuda · Accepted Answer · 2012-09-05 14:18:03Z

2

I see three issues here (perhaps there are more). First, username will not be a field in the event.context, but will actually be the event context. Secondly, I believe you need to specify view.username in the valueBinding, otherwise the controller is the default home of the property (I believe). Then, to set it to initial state you need to set it to null. Third, the target of your action will be the router, so you need to specify the view as the target.

This should work:

{{#view PersonApp.AddPersonView}}
   {{view Ember.TextField valueBinding="view.username"}}
     {{#with this as username}}
       <input type="submit" value="add" {{action addPerson username target="this"}}/>
     {{/with}}
{{/view}}

PersonApp.AddPersonView = Ember.View.extend({
  username:  null                                                                               
  addPerson: function(event) {
    var username = event.context;
    if (username) {
       this.get('controller').addPerson(username);
       this.set('username', null); 
    }
 }

});

Also, a better way of creating a new person would be to create a blank person model, bind the controller and view to that, and then save the record, afterwards setting the binding back to null.

edited Sep 5, 2012 at 14:18

answered Sep 5, 2012 at 14:07

buuda

1,4277 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toran Billups Over a year ago

This is for a bare bones hello world so I won't have a router or ember-data in this instance

eduard · Accepted Answer · 2013-04-22 10:58:20Z

1

You can do the validation and then pass data right now, even with Gidrius' code. The only thing you need to do is write the validation code in the submit handling method. Or, 'cause we`re talking client-side validation anyway, you can do it on field value change or blur, which will give the user almost instant feedback on what he is doing.

edited Apr 22, 2013 at 10:58

answered Feb 1, 2013 at 16:41

eduard

1,4953 gold badges13 silver badges29 bronze badges

Comments

Toran Billups · Accepted Answer · 2012-09-06 01:22:06Z

0

I still couldn't get something like this.get('username') to work but I ended up with the following

{{#view PersonApp.AddPersonForm}}
       {{view Ember.TextField valueBinding="username"}}
       <input type="submit" value="add" {{action addPerson this}}/>
{{/view}}

PersonApp.AddPersonForm = Ember.View.extend({
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      PersonApp.personController.addPerson(username);
      event.context.set('username', '');
    }
  }    
});

answered Sep 6, 2012 at 1:22

Toran Billups

27.4k41 gold badges159 silver badges272 bronze badges

Comments

Giedrius · Accepted Answer · 2013-02-01 15:01:18Z

0

probably a bit too late, but might be helpful to someone else.

Usually form field value will be bind to controller or model, so all you need is to have is a submit function in the controller so whenever function will be called you will have access to the fields via bindings.

Here is how it all could look like, assuming you are using latest pre.4 ember

Updated

// DOM part
<form {{action submitForm on="submit"}}>
    {{view Ember.TextField valueBinding="username"}}
    <button type="submit">add</button>
</form>

And here is a controller

PersonApp.PersonController = Ember.ArrayController({
  username: '',
  submitForm: function() {
    var u = this.get('username'); // saving value to variable
    this.set('username',''); // sets username to ''
    console.log(u); // will output saved username
  }
});

edited Feb 1, 2013 at 15:01

answered Feb 1, 2013 at 13:51

Giedrius

1,7083 gold badges17 silver badges27 bronze badges

1 Comment

Toran Billups Over a year ago

Excellent example - thanks for the late reply! I still don't know where the logic itself should live but I prefer your HTML to what I did initially. I feel like ember is missing a form layer / class / component that would be tied to each view (so in this example I could validate the form and then pass it from the form to the controller if it was all good). Some would argue the controller is the right place for this but I prefer to have that responsibility live in another object myself.

Collectives™ on Stack Overflow

How to build a form with access to text input values on submit with ember.js

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related