CODEWITHSUNDEEP
ember.js
Toran Billups
Toran Billups

Reputation: 27399

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

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

Upvotes: 1

Views: 2385

Answers (4)

eduard
eduard

Reputation: 1495

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.

Upvotes: 1

Giedrius
Giedrius

Reputation: 1688

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
  }
});

Upvotes: 0

Toran Billups
Toran Billups

Reputation: 27399

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', '');
    }
  }    
});

Upvotes: 0

buuda
buuda

Reputation: 1427

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.

Upvotes: 2

Related Questions