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

时间:2014-01-06 22:30:05

标签: javascript ruby-on-rails ajax angularjs relational-database

我正在构建一个网站,当时数据之间存在许多关系链接。例如,用户可以生成bookings,其中包含bookerbookee,以及可以附加到messages的{​​{1}}数组。

json的一个例子是......

booking

现在我的问题是,您如何在角度应用中对此数据进行建模?而且,虽然非常相关,你会如何从服务器中提取它?

我可以看到它有几个选择。

立即从服务器中取出所有内容

在这里,我将依赖服务器来序列化嵌套数据,并使用给定的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' } ] }

预订

为此,我将对我的数据模型使用promises,并让服务器返回一个对象,如...

ids

然后我将传递给booking = { id: 1, location: 'POST CDE', desc: "Awesome stackoverflow description." booker: 1, bookee: 2, messages: [1] } 构造函数,该构造函数将通过各自的工厂将相关的(Bookingbookerbookee)ID解析为数据对象。

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


总之,最好是依靠单个ajax请求一次收集所有嵌套信息,或依赖各种请求在事后“充实”初始响应。

我正在使用Rails 4,如果这有帮助(可能Rails更适合单个请求?)

1 个答案:

答案 0 :(得分:0)

我将使用一个可以充分利用两个世界的系统,通过为我的所有资源创建一个基类,该基类将被赋予自定义resolve函数,这将知道什么该特定类中的字段可能需要解析。示例资源函数看起来像这样......

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

它会将bookerbookee字段的值传递给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 factorys get函数从服务器(或通过缓存系统)检索数据,实现显然在get函数本身内部。但是,如果检测到的值是非NaN,那么我假设用户已经被序列化并且只是用值扩展它。

因此它在缓存方式中是不可见的,并且与服务器返回嵌套对象的方式无关。允许模块化的ajax请求,并避免必须通过其缓存系统重新下载不必要的数据。

一旦一切正常并且正在运行,我将编写一些测试,以确定应用程序是否可以更好地服务于更大的,分块的ajax请求或更小的模块化请求。无论哪种方式,这都允许您通过角度工厂传递所有模型数据,因此您可以依赖每个记录继承您可能想要使用的任何原型方法。