Restangular,Django REST和关系

时间:2014-07-30 13:59:31

标签: django angularjs rest django-rest-framework restangular

我正在使用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代码显示了我如何加载数据:(我实际上使用了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等)中改变我的做事方式。

1 个答案:

答案 0 :(得分:4)

我认为最好的方法是创建嵌套的选择器。您必须在帖子上关闭序列化程序,但在列表中并检索这样的序列化程序。

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; 
})