Question

以下是我要做的事情：

发出ajax请求以从PHP脚本中检索JSON数据
将该信息插入DataStore模型
将这些模型存储在控制器中
使用带有把手模板的{{#each}}显示信息

ember-data是否有内置的检索数据的方式？如果没有，在哪里是否应该实施AJAX请求？
将JSON数据插入DS模型的最佳方法是什么？
然后将模型与控制器同步的最佳方法是什么？

任何实施所有4个步骤的例子也会非常有用，因为我似乎找不到任何一个。

Answer 1

发出AJAX请求

// Find all pets.
var pets = App.Pet.find();

// Find pet with ID of 1.
var pet = App.Pet.find(1);

进入DataStore模型

上面的

pets将是包含许多App.Pet模型的DS.RecordArray，而pet只是一个App.Pet。

存储在控制器中

App.IndexRoute = Ember.Route.extend({
   model: function() {
       return App.Pet.find(4);
   } 
});

路由器用于设置控制器，因此我们在此指定IndexController应该包含ID为4的App.Pet。这当然可以是动态的。由于您的控制器仅代表一个模型，因此它应该是ObjectController类型，但如果它用于存储许多宠物，那么它应该是ArrayController类型。

通过指定模型，您可以在IndexController和索引视图（data-template-name="index"）中访问它。这是因为当您进入索引路由时，IndexController被定位/实例化，IndexView被实例化并放入DOM，所有这些都在咨询IndexRoute以设置控制器之后。

您现在可以在模板中执行以下操作（虽然不需要model.）：{{model.name}}，它会为您提供宠物的名字。

使用#each

进行展示

使用上述代码的修改版本查找所有宠物，但返回所有宠物。请记住，这是通过为find方法指定无参数来完成的：

App.IndexRoute = Ember.Route.extend({
   model: function() {
       return App.Pet.find();
   }
});

现在我们可以循环遍历索引模板中的所有宠物。虽然有很多方法可以循环，例如包括content. / model.，但不包括.content / model，使用this，controller等等cetera ......，没有必要，但那是另一天。目前重要的是，这将对您有用，并且将是最直观的：

{{#each pet in controller}}
    {{pet.name}}
{{/each}}

如果你愿意的话，我会为你准备一个jsFiddle。请告诉我。

<强>问题

ember-data是否有内置的检索数据的方法？如果没有，在哪里应该实施AJAX请求吗？

是的，那是Ember Data module，some good guides on EmberJS.com。

将JSON数据插入DS模型的最佳方法是什么？

按照上面的示例使用Ember数据。

然后将模型与控制器同步的最佳方法是什么？

使用相应路径中的model挂钩指定控制器所代表的模型。

Answer 2

<强>＆LT;编辑＆gt;

就像我在评论中所说的那样，这个问题立即提出了很多问题，所以要跟进，这是一个正在进行的工作：http://jsfiddle.net/schawaska/dWcUp/

这不是100％，但涵盖了您的一些问题。它使用FixtureAdapter。因为我找时间，我会更新它。

<强>＆LT; /编辑＆gt;

1发出ajax请求以从PHP脚本中检索JSON数据

Ember-Data将为您解决这个问题。请考虑以下事项：

window.App = Em.Application.create();

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.RESTAdapter'
});

App.Product = DS.Model.extend({
    name: DS.attr('string'),
    imageUrl: DS.attr('string')
})

上面的代码在您的客户端应用程序中定义了一个数据存储（几乎就像一个ORM）。 Ember使用约定优于配置（严重），因此根据配置，此代码要求您的后端在与/products相同的域中拥有与GET，POST，PUT和DELETE对话的资源。

2将该信息插入DataStore模型

考虑到我上面所说的内容，请致电以下其中一项：

App.store.find(App.Product)或App.Product.find()

EmberData将通过针对您的资源/products的AJAX发出GET请求，如果您说App.Product.find(1)，它将定位/products/1。您的应用store将使用其adapter和适配器的serializer来转换JSON结果并将其数据具体化到您的App.Product模型中。

3将这些模型存储在控制器中

定义应用程序路由器时完成此操作。无论你做什么，Ember都会运行自己的工作流程，但它为你提供了几个钩子，让你可以控制那个特定的动作。请考虑以下事项：

App.Router.map(function() {
  this.resource('products');
});

App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.Product.find();
  }
});

上面的代码填充了products路径中使用的模型（您可以在http://yourdomain.com/#/products访问）。在内部，它会为您的ProductsController生成代码，或者您可以定义自己的代码，该代码应该扩展ArrayController。控制器将具有content属性，该属性是模型或模型集合的别名。再次，约定优于配置。

4使用带有把手模板的{{#each}}显示信息

如果您遵循惯例，在手柄模板中，您应该像这样迭代您的收藏：

{{#each product in controller}}
    {{#linkTo 'product' product}}
        {{product.name}}
    {{/linkTo}}
{{/each}}

ember-data是否有内置的检索数据的方式？如果没有，在哪里   应该实施AJAX请求吗？

是的，只需针对产品型号调用App.Product.find()，然后在向后端的产品资源发出AJAX请求时返回空白ModelArray，然后将数据实现/填充到每个模型中一次它从服务器接收数据。

将JSON数据插入DS模型的最佳方法是什么？

如果你使用的是ember-data，你不应该担心这个。在大多数情况下，框架会为您执行此操作。这就是我们喜欢它的原因。但是，您可能必须根据后端配置映射，命名空间和复数。

然后将模型与控制器同步的最佳方法是什么？

类似的东西：

var product = App.Product.createRecord({
    name: 'laptop',
    imageUrl: 'path/to/image.png'
});
product.save();

这应该会向您的后端API发出POST或PUT个请求。

你一定要检查：

http://emberjs.com/guides/

https://peepcode.com/products/emberjs

http://toranbillups.com/blog/archive/2013/01/03/Intro-to-ember-js-and-the-new-router-api/

使用ember-data / DataStore将外部数据加载到Ember模板中

2 个答案: