0

这是我很想做的事情：

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

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

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

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

任何实现所有 4 个步骤的示例也将非常有帮助，因为我似乎找不到任何示例。

4

2 回答 2

2

发出 AJAX 请求

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

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

进入 DataStore 模型

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

存储在控制器中

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

路由器用于设置控制器，因此我们在这里指定IndexController应该持有一个App.PetID 为 4 的路由器。这当然可以是动态的。由于你的控制器只代表一个模型，它应该是 type ObjectController，但如果它用于存储许多宠物，那么它应该是 type 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等等......，但这不是必需的，但那是另一天。目前重要的是这对你有用，并且是最直观的：

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

如果您愿意，我会为此编写一个 jsFiddle。请告诉我。

问题

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

是的，这就是Ember Data 模块，它在 EmberJS.com 上有一些很好的指南。

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

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

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

在适当的路由中使用model钩子来指定你的控制器代表的模型。

于 2013-02-21T21:10:13.910 回答
2

<编辑>

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

这不是 100%，但涵盖了您的一些问题。它使用 FixtureAdapter。我会在有时间的时候更新它。

</编辑>

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 使用约定优于配置（大量），因此根据配置，此代码希望您的后端在与/productsGET、POST、PUT 和 DELETE 对话的同一域中拥有资源。

2 将该信息插入到 DataStore 模型中

考虑到我上面所说的，通过调用以下方法之一：

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

EmberData 将通过针对您的资源的 AJAX 触发 GET 请求/products，如果您说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 请求？

是的，只需调用一个产品模型，它会在向后端的产品资源发出 AJAX 请求时App.Product.find()返回一个空白，然后在从服务器接收到数据后将数据具体化/填充到每个模型中。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/

于 2013-02-21T21:11:09.697 回答