title: How can I load ember model after successful ajax call in Emberjs?
body: <p>I have defined a model called <code>todo.js</code> in <code>app/models</code> like this:</p>
  
  <pre><code>export default DS.Model.extend({
    title: DS.attr('string'),
    created_at: DS.attr('date'),
    updated_at: DS.attr('date'),
    is_deleted: DS.attr('boolean'),
    is_done: DS.attr('boolean')
  });
  </code></pre>
  
  <p>Let's say I don't want to use to <code>ember-data</code> &amp; I simply want to use plain old <code>ajax</code> like this:</p>
  
  <pre><code>export default Ember.Route.extend({
    model() {
      return Ember.$.getJSON('http://localhost:3001/todo').then((data) =&gt; {
         // How would I load the data into the model here?
      });
    }
  });
  </code></pre>
  
  <p>How would I load the data I am getting from the successful <code>ajax</code> call into the model?</p>
  
  <p>I have defined a component to show todos like this:</p>
  
  <pre><code>&lt;ul&gt;
    {{#each model as |todo index|}}
      {{#link-to 'todo' todo.id}}&lt;li&gt;{{todo.title}}&lt;/li&gt;{{/link-to}}
    {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here's the <code>router.js</code>:</p>
  
  <pre><code>Router.map(function() {
    this.route('todos');
    this.route('todo', { path: '/todo/:todo_id' })
  });
  </code></pre>