title: EmberJS Form - select field not POSTed
body: <p>I'm learning Ember and I'm trying to build an Ember form with a dropdown. I want to POST the following information:</p>
  
  <pre><code>category: "http://localhost:8000/api/categories/3"
  title: "Do this"
  </code></pre>
  
  <p>What Ember is actually posting is: this:</p>
  
  <pre><code>{"data":{"attributes":{"title":"Do this now"},"relationships":{"category":{"data":null}},"type":"tasks"}}
  </code></pre>
  
  <p>The value of the category isn't posted and I'm not sure what I'm missing. I was able to list all the tasks and filter them by category so I suppose the models are fine.</p>
  
  <hr>
  
  <p><strong>/app/models/task.js</strong></p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.Model.extend({
    title: DS.attr('string'),
    category: DS.belongsTo('category')
  });
  </code></pre>
  
  <hr>
  
  <p><strong>/app/routes/tasks/new.js</strong></p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Route.extend({
    model() {
      return Ember.RSVP.hash({
         'task': this.store.createRecord('task'),
         'categories': this.store.findAll('category')
      });
    },
    setupController(controller, model) {
      const categories = model.categories;
  
      controller.set('categories', categories);
      controller.set('task', model.task);
    },
    actions: {
      saveTask(newTask) {
        newTask.save().then(() =&gt; this.transitionTo('tasks'));
      },
  
      willTransition() {
        this.controller.get('model').rollbackAttributes();
      }
    }
  });
  </code></pre>
  
  <hr>
  
  <p><strong>/app/templates/tasks/new.hbs</strong></p>
  
  <pre><code>...    
  {{category-select
              task=task
              categories=categories
              default=task.category
              value=task.category
              }} 
  </code></pre>
  
  <hr>
  
  <p><strong>/app/templates/components/category-select.hbs</strong></p>
  
  <pre><code>{{#each categories as |category|}}
    &lt;option value="http://localhost:8000/api/categories/{{category.id}}" selected={{is-equal category.id default.id}}&gt;
      {{category.name}}
    &lt;/option&gt;
  {{/each}}
  </code></pre>