title: How to post nested models in EmberJS with WebAPIAdapter from same view
body: <p>Our team has recently adopted EmberJS as our front-end framework! Our application is an ASP.NET MVC 4 application with WebAPI controllers interacting with EmberJS. It's almost magic the way it works and we really love it! However, we have a situation that we have simply not been able to resolve. We've spent way too much time on it and I'm hoping that someone on StackOverflow might be able to help us.</p>
  <p>The application is very simple. A user is able to create an article and reference many sources from where they got the information from. Our models are setup like this:</p>
  <pre><code>// ARTICLES MODEL
  App.Article = DS.Model.extend({
    status: DS.attr(&quot;string&quot;),
    title: DS.attr(&quot;string&quot;),
    body: DS.attr(&quot;string&quot;),      
    sources: DS.hasMany(&quot;App.Source&quot;),
  
    didCreate: function () {
      var sources = this.get('sources');
      var id = this.get('id'); // &lt;-- this is always null (?)
      debugger;
      sources.forEach(function (source) {
        source.set('articleId', id);
      });
    },
  });
  
  // SOURCE MODEL
  App.Source = DS.Model.extend({
    name: DS.attr(&quot;string&quot;),
    url: DS.attr(&quot;string&quot;),
    article: DS.belongsTo(&quot;App.Article&quot;)
  });
  
  // ARTICLES.NEW CONTROLLER
  App.ArticlesNewController = Ember.ObjectController.extend({
    // ... removed for brevity
    addSource: function(){
      var self = this;
      var source = App.Source.createRecord({
        articleId: self.get('id')
      });
      self.get('model.sources').addObject(source);
    },
    /* we also tried this, but it sends sources individually as well 
    addSource: function() {
      this.get('model.sources').createRecord();
    },
    */
  });
  </code></pre>
  <p>We are able to get everything working just fine. However, when creating articles things break down since the user is able to enter all the properties of the article as well as add multiple sources before commiting everything to the server. The problem is that when we post the data to the server, all of the models try to rush to the server as fast as they can and the <code>Source</code> objects don't have their <code>articleId</code> properties set yet. I tried getting around this by trapping the <code>didCreate</code> hook on DS.Model (notice code above)... This isn't work either.</p>
  <h2>Update: July 2nd</h2>
  <p>On the WebAPIAdapter, I tried setting the embedded property to <strong>always</strong> for the App.Article.sources:</p>
  <pre><code>DS.WebAPIAdapter.map('App.Article', {
    sources: { embedded: 'always' }
  });
  </code></pre>
  <p>This still does not fix the problem. Each <code>source</code> is still hitting the server just as fast as the parent <code>article</code>. How do I prevent the <code>source</code> objects from being posted to the server for a particular transaction (ie. the 'New Article' transaction)?</p>
  <p>Perhaps we are overthinking this and there is a &quot;one config setting&quot; flag that we are missing somewhere. We would appreciate any help on this!</p>
  <p>Thanks in advance,
  Luc</p>
  <p>P.S. Note that I tried creating a fiddle for this: <a href="http://jsfiddle.net/TrailHacker/pmbb2/4/" rel="nofollow noreferrer">proof</a>. However, it took me +3 hours to get where I got (I'm not a professional JSFiddler) and I clearly have more work that needed done. I resorted to explaining the problem verbally instead with code snippets. :)</p>