Angular.js 有效地访问和显示嵌套模型

Question

我正在构建一个数据之间存在许多关系链接的网站。例如，用户可以创建bookings，其中将包含booker 和bookee，以及可以附加到booking 的messages 数组。

一个示例 json 将是...

booking = {
  id: 1,
  location: 'POST CDE',
  desc: "Awesome stackoverflow description."
  booker: {
    id: 1, fname: 'Lawrence', lname: 'Jones',
  },
  bookee: {
    id: 2, fname: 'Stack', lname: 'Overflow',
  },
  messages: [
    { id: 1, mssg: 'For illustration only' }
  ]
}

现在我的问题是，您将如何在您的 Angular 应用程序中对这些数据进行建模？而且，虽然非常相关，但您将如何从服务器中提取它？

如我所见，我有几个选择。

一次从服务器拉取所有东西

在这里，我将依靠服务器来序列化嵌套数据并只使用给定的 json 对象。缺点是我不知道在请求预订或类似对象时会涉及哪些用户，因此我无法缓存它们，因此每次请求时我都会提取大量数据。

以 booker/bookee 为用户ids 拉取预订

为此，我会为我的数据模型使用 Promise，并让服务器返回一个对象，例如...

booking = {
  id: 1,
  location: 'POST CDE',
  desc: "Awesome stackoverflow description."
  booker: 1, bookee: 2,
  messages: [1]
}

然后我会将其传递给 Booking 构造函数，该构造函数将通过各自的工厂将相关的（booker、bookee 和 message）ID 解析为数据对象。

这里的缺点是许多 ajax 请求用于单个预订请求，尽管它使我能够缓存用户/消息信息。

---

总之，是依靠单个 ajax 请求一次收集所有嵌套信息，还是依靠各种请求来“充实”事后的初始响应是更好的做法。

如果有帮助，我正在使用 Rails 4（也许 Rails 更适合单个请求？）

Answer 1

我将使用一个系统，通过为我的所有资源创建一个基类，该基类将被赋予一个自定义的resolve 函数，我将使用一个系统，我希望它可以两全其美，它将知道该特定领域的哪些字段类可能需要解决。示例资源函数如下所示...

class Booking
  # other methods...
  resolve: ->
    booking = this
    User
      .query(booking.booker, booking.bookee)
      .then (users) ->
        [booking.booker, booking.bookee] = users

它将booker 和bookee 字段的值传递给User 工厂，该工厂将有一个像这样的构造函数...

class User
  # other methods
  constructor: (data) ->
    user = this
    if not isNaN(id = parseInt data, 10)
      User.get(data).then (data) ->
        angular.extend user, data
    else angular.extend this, data

如果我向User 构造函数传递了一个无法解析为数字的值（因此这将很高兴地采用字符串ids 以及数字）然后它将使用User 工厂get 函数从服务器检索数据（或通过缓存系统，实现显然在 get 函数本身内部）。但是，如果检测到该值是非 NaN，那么我将假设 User 已经被序列化并使用该值扩展它。

所以它在如何缓存方面是不可见的，并且独立于服务器如何返回嵌套对象。允许模块化 ajax 请求并避免通过其缓存系统重新下载不必要的数据。

一旦一切都启动并运行起来，我将编写一些测试来看看应用程序是否会更好地处理更大的、分块的 ajax 请求或像上面这样的更小的模块化请求。无论哪种方式，您都可以通过 Angular 工厂传递所有模型数据，因此您可以依赖于每条记录都继承了您可能想要使用的任何原型方法。