title: bind read-only data to another model
body: <p>I have a survey app with a model to store questions and its choices:</p>
  
  <pre><code>/models/question.js
  export default DS.Model.extend({
       text: DS.attr(),
       choices: DS.attr(),
  });
  </code></pre>
  
  <p>using <code>mirage-fixtures</code> to store these questions as follow: </p>
  
  <pre><code>export default [{
      id: '1',
      text: 'What is your name\'s first letter?',
      choices: ['A', 'B', 'C', 'D'],
    }, { ... }
  </code></pre>
  
  <p>And I have another model to store records:</p>
  
  <pre><code>/models/answer.js
  export default DS.Model.extend({
       submittedAt: DS.attr(),
       questions: DS.hasMany('question')
  });
  
  /routes/answer.js
  export default Ember.Route.extend({
    model() {
       return this.get('store').createRecord('answer', { submittedAt: new Date() });
    },
  });
  </code></pre>
  
  <p>Also I am using <a href="https://github.com/yapplabs/ember-radio-button" rel="nofollow noreferrer">ember-radio-button</a>, as an easier way to deal with radio buttons. Hooking a component for question in a nested route that call a question.</p>
  
  <pre><code>/routes/answer/question.js
  export default Ember.Route.extend({
    model(params) {
      return this.get('store').find('question', params.question_id)
    }
  });
  
  /templates/answer/question.hbs
   {{model.text}}
   {{#each model.choices as |choice|}}
      {{#radio-button
        value=choice
        groupValue=question
        changed=selected
        }}
          {{choice}}
      {{/radio-button}}
    {{/each}}
  
  /components/a-question.js
  export default Ember.Component.extend({
      actions: {
          selected(choice) {
            console.log('Current choice is: ', choice);
            this.set('question', choice);
          }
        }
  });
  </code></pre>
  
  <p>So how can I store selected choices of each question in answer data? </p>