title: Loading model from component
body: <p>I'm trying to display a chart using Ember.js. I tried to load data from the model from the component "multiple-line.js" like so:</p>
  
  <pre><code>{{multiple-line dataset=model}}
  </code></pre>
  
  <p><strong>Route</strong></p>
  
  <pre><code>model: function() {
      return this.store.findAll('dataset');
  }
  </code></pre>
  
  <p><strong>Models/dataset.js</strong></p>
  
  <pre><code>App.Dataset = DS.Model.extend({
    key: DS.attr('string'),
    values: DS.hasMany('value',{async: true})
  });
  </code></pre>
  
  <p><strong>Models/value.js</strong></p>
  
  <pre><code>App.Value = DS.Model.extend({
    datasets: DS.belongsTo('dataset',{async: true}),
    xValue: DS.attr('number'),
    yValue: DS.attr('number') 
  });
  </code></pre>
  
  <p><strong>Adapters/Application.js</strong>
  That start by :</p>
  
  <pre><code>import DS from 'ember-data';
  
  export default DS.RESTAdapter.extend({
      shouldReloadAll() { return true; }
  });
  </code></pre>
  
  <p><strong>Server/Mocks/Datagroup.js</strong></p>
  
  <pre><code>module.exports = function(app) {
    var express = require('express');
    var datagroupRouter = express.Router();
  
    datagroupRouter.get('/', function(req, res) {
      res.send({
        'dataset': [
            {
            id: 1,
            key: "Cbio",
            values: [
                {
                id: 1,
                "xValue": 1,
                "yValue": 21
                },
                {
                id: 2,
                "xValue": 20,
                "yValue": 150
                },
                {
                id: 3,
                "xValue": 40,
                "yValue": 200
                },
  </code></pre>
  
  <p>I didn't combine all the code for displaying my D3.js's Chart in the component. So How can I use Model/Adapter/Route/Component for this application correctly. Here is a <a href="http://emberjs.jsbin.com/huqunotigu/3/edit?html,js,output" rel="nofollow">JsBin with the code</a>.</p>