title: ember.js - what is the correct controller/view pattern for creating a new model
body: <p>I have an app which at the moment contains a view of objects of the same model. They are retrieved from the server, looped through and added to the list controller using an add method</p>
  
  <pre><code>&lt;script&gt;
  App.Controllers.List = Em.ArrayProxy.create({
    content: Ember.A([]),
    add: function(obj){
      this.pushObject(obj);
    }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am now working on a part where the user creates a new object that (after passing validation) will be added to the list and also sent to the server.</p>
  
  <p>I can't find any examples on the best patter to follow for creating a new object via an input form. I can see a few options, and have semi-implemented a few but nothing feels right.</p>
  
  <ul>
  <li>Create a view with appropriate form elements and a method for instantiating the model using various properties retrieved from the form elements using .get()</li>
  <li>Create a model in the view's content and bind form elements to that. Include a method on the view for adding to the controller array / saving to the server</li>
  <li>Create a model, add it to the controller array and open it for editing</li>
  </ul>
  
  <p>I can kind of fight out the functionality I want, but I'd prefer make sure I am aware of best practice.</p>
  
  <p>I currently have something like this (which is the second bullet on my list)</p>
  
  <pre><code>&lt;script&gt;
  App.Views.ItemCreate = Em.View.extend({
    content: App.Models.Item.create({}),
    templateName: 'create',
    createButton: function(){
  
      var itemObj = this.get('content');
      var item = {};
      item.title = this.get('content').get('title');
  
      $.ajax({
        type: 'POST',
        url: '/test/data.json',
        data: item,
        dataType: 'json',
        success: function(responseData, textStatus, jqXHR) {
          App.Controllers.List.add(itemObj);
        }
      });
    }
  });
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="create"&gt;
    {{view Em.TextField id="create-title" valueBinding="content.title"}}
    &lt;a href="#" {{action "createButton" }}&gt;Create&lt;/a&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help greatly appreciated</p>
  
  <p><strong>NOTES</strong></p>
  
  <p>I've changed the correct answer to pangratz's. Although the other responses directly answered my question, I believe those who find this via Google should refer to the answer Pangratz provided as not only is it good MVC, but it is more Ember-y :o)</p>