Restangular,Django REST和关系

Question

我正在使用Django REST Framework来建模使用大量模型关系的REST API.

使用AngularJS和Restangular在前端级别解决这些关系的简单方法是什么？

楷模

这就是我的模型的一部分:

class Country( Model ):
  name = CharField( max_length = 256 )

class City( Model ):
  name = CharField( max_length = 256 )
  postal_code = CharField( max_length = 16 )

  country = ForeignKey( "Country" )

class Customer( Model ):
  first_name = CharField( max_length = 256 )
  last_name = CharField( max_length = 256 )

  city = ForeignKey( "City" )

获取数据

以下JavaScript代码显示了我如何加载数据:(我实际上使用了返回的promises all(),但是$object为了解释这个而更短)

$scope.countries = [];
$scope.cities = [];
$scope.customers = [];

Restangular.all( "countries" ).getList().$object;
Restangular.all( "cities" ).getList().$object;
Restangular.all( "customers" ).getList().$object;

以下是城市响应的示例:( 所有,无一例外,模型都包含一个id字段)

[{"id": 1, "name": "Bocholt", "postal_code": "46397", "country": 1}]

显示数据

最后是用于显示数据的AngularJS部分; 你在这里看到的代码是我想用它的方式:

<table>
  <tbody>
    <tr ng-repeat="customer in customers">
      <td>{{ customer.first_name }}</td>
      <td>{{ customer.last_name }}</td>
      <td>{{ cities[customer.city].name }}</td>
      <td>{{ countries[cities[customer.city].country].name }}</td>
    </tr>
  </tbody>
</table>

不可否认,嵌套语句看起来有点难看,但考虑到原始数据保持不变的事实,我很喜欢这样做.

---

不幸的是,代码(当然)不起作用.什么是解决这种关系的好方法？

---

线索:我愿意在任何涉及的框架/程序(Django,Django REST,AngularJS,Restangular等)中改变我的做事方式.

Answer 1

我相信最好的方法是创建嵌套序列化器。您必须关闭帖子上的序列化器，但在列表上并检索像这样的序列化器将起作用。

class CountrySerializer(serializer.ModelSerializer):
    class Meta:
        model = Country


class CitySerializer(serializer.ModelSerializer):
    country = CountrySerializer()
    class Meta:
        model = City

class CustomerSerializer(serializer.ModelSerializer):
    city = CitySerializer()
    class Meta:
        model = Customer

class CustomerViewSet(viewsets.ModelViewSet):
    model = Customer
    serializer_class = CustomerSerializer
    queryset = Customer.objects.all()

然后你的 Restangular 只需要调用 api 并且对象就被正确嵌套了

Restangular.all('costumers').one(1).get().then(function(response) {
    $scope.costumer = response; 
})