如何在 Emberrjs 中成功调用 ajax 后加载 ember 模型?

Question

我在app/models中定义了一个名为todo.js的模型，如下所示：

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')
});

假设我不想使用ember-data，我只想使用像这样的普通旧ajax：

export default Ember.Route.extend({
model() {
return Ember.$.getJSON('http://localhost:3001/todo').then((data) => {
// How would I load the data into the model here?
});
}
});

如何将从成功的ajax调用中获得的数据加载到模型中？

我定义了一个组件来显示这样的待办事项：

<ul>
{{#each model as |todo index|}}
{{#link-to 'todo' todo.id}}<li>{{todo.title}}</li>{{/link-to}}
{{/each}}
</ul>

这是router.js：

Router.map(function() {
this.route('todos');
this.route('todo', { path: '/todo/:todo_id' })
});

Answer 1

您可以使用 pushPayload 方法和 peekAll 。

export default Ember.Route.extend({
model() {
return Ember.$.getJSON('http://localhost:3001/todo').then((data) => {
this.get('store').pushPayload('todo',data);
return this.get('store').peekAll('todo');
});
}
});

Answer 2

如果你不想使用 ember-data，就不要使用它：

export default Ember.Route.extend({
model() {
return Ember.RSVP.resolve(Ember.$.getJSON('http://localhost:3001/todo'));
}
});

这将按预期工作，并允许您访问model下返回的 JSON。因此，对于您的模板，只需确保http://localhost:3001/todo发送如下所示的 JSON：

[{
"id": "a",
"title": "foo"
}]

Answer 3

export default Ember.Route.extend({
model() {
return Ember.$.getJSON('http://localhost:3001/todo').then((data) => {
return Ember.Object.create(data);
});
}
});