CODEWITHSUNDEEP
ember.js
user1168427
user1168427

Reputation: 1003

Adding a new object to an ArrayController

I am attempting to create a basic CRUD setup for managing 'User' objects in Ember. I think I have my models and routes in order. I'm struggling with managing:

A) The proper controller setup for the (all) users page. I think that I should be creating an ArrayController, but it seems to work fine automatically. Does my Ember App know to make an array of individual 'user' objects? if so, how?

B) Passing data from InputFields. If you click 'Add User' in my example, I have made a form to create a user. When you click 'create', I'm not sure how to get the textField values, nor do I understand what to do with those values once I have them. How would I update my controller?

Again, here a jsbin of my code. Any guidance would be greatly appreciated.

Upvotes: 0

Views: 838

Answers (1)

mavilein
mavilein

Reputation: 11668

Regarding A): I assume you refer to the following route of your App. This model function returns an Array. Therefore Ember knows that it should use an ArrayController to render your UsersRoute.

App.UsersIndexRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});

Regarding B): I have updated your code -> http://jsbin.com/ozilam/15/edit

I needed to update some of your names (controller and view) to match the naming conventions of Ember.

With Ember you do not have to use forms and manually read those values. Instead you create a new records, when you enter your Route:

App.UsersNewRoute = Ember.Route.extend({
  setupController : function(controller){
    controller.set("content", App.User.createRecord({}));
  }
});

Inside your View you are binding on the properties of your record. As you see i also updated your button with an action helper.

<script type="text/x-handlebars" data-template-name="users/new">
        <div class="row">
            <div class="six columns">
                <h3>New User Information</h3>

                    <form>
                        <label>First Name</label>
                        {{view Ember.TextField valueBinding='name_first'}}<br />
                        <label>Last Name</label>
                        {{view Ember.TextField valueBinding='name_last'}}<br />
                        <label>Email Address</label>
                        {{view Ember.TextField valueBinding='email_address'}}<br />
                        <label>SSN</label>
                        {{view Ember.TextField valueBinding='ssn'}}<br />

                        <button {{action create target="view"}} class="button">Create</button>
                        {{#linkTo users}}Cancel{{/linkTo}}
                    </form>

            </div>
        </div>
    </script>

As those changes in the form get automatically propagated to your controller, you can just access the object in the controller:

App.UsersNewView = Ember.View.extend({
  didInsertElement: function() {
    this.$('input:first').focus();
  },
  create: function(){
    console.log('view submitted');
    var newUser = this.get("controller.content");
    console.log(newUser.get("name_first"));
    console.log(newUser.get("name_last"));

    // HOW DO I PROCESS THIS FORM

  }
});

Note: As i am writing this i am realizing that it would be probably better, if you would handle this event in your Controller instead of the View, since its an data modification task.

Upvotes: 2

Related Questions