관련 모델이 AngularJS에있는 양식 제출을 처리하는 가장 좋은 방법은 무엇입니까?

Question

내 프로젝트는 AngularJS + Django Tasypie를 사용합니다. 나는 아래에 게시 한 CoffeeScript 코드로 양식 제출을 처리하고 있습니다. Angular로 개발하기 시작한 이래로 나는 개선을위한 제안을 원합니다. 어쩌면 서비스 및/또는 $ 자원의 사용? "프로젝트"엔티티에는 oneToMany "클라이언트"관계가 있음을 알아 두는 것이 중요합니다.

감사합니다.

일반 모델 클래스 :

class window.Model 
    constructor: (options) -> 
     @$scope = options.$scope 
     @$http = options.$http 
     @id = if options.id? then options.id 

    fetch: (cb= ->) => 
     @$http.get(@url + '/' + @id).success (data) => 
      @toScope(data) 
      cb(data) 

    fetchAll: (cb= ->) => 
     @$http.get(@url).success (data) => 
     @toScopeAll(data) 
     cb(data) 

    save: (data, cb= ->) -> 
     @update data, cb if @id? else @create data, cb 

    create: (cb= ->) -> 
     @$http.post(@url + '/', @fromScope()).success cb 

    update: (cb= ->) => 
     @$http.put(@url + '/' + @id, @fromScope()).success cb 

    remove: (cb= ->) -> 
     @$http.delete(@url + '/' + @id).success cb 

프로젝트/클라이언트 모델 클래스 :

class window.ProjectModel extends Model 
     url: '/api/project' 

     toScope: (data) => 
      @$scope.project = data 
      @$scope.client = @$scope.project.client.id 

     fromScope: (data) => 
      id: @$scope.project.id 
      name: @$scope.project.name 
      client: id: @$scope.client 


    class window.ClientModel extends Model 
     url: '/api/client' 

     toScopeAll: (data) => 
     @$scope.clients = [id: '0', name: 'Choose...'].concat data.objects 

컨트롤러 코드 :

window.ProjectCtrl = ($scope, $routeParams, $http) -> 

    redirect = -> window.location = '#/projects' 
    $scope.save = -> project.save redirect 
    $scope.delete = -> project.remove redirect 
    $scope.cancel = redirect 

    $scope.client = '0' 
    client = new ClientModel($scope: $scope, $http: $http) 
    client.fetchAll() 

    project = new ProjectModel($scope: $scope, $http: $http) 

    if $routeParams.projectId? 
     $scope.formType = 'update' 
     project.id = $routeParams.projectId 
     project.fetch() 

Answer 1

데이터 - 엔티티 당 하나의 라우트에 매달려있는 것처럼 느껴질 수 있습니다. 이는 직렬화 레이어를 데이터 모델에 연결함으로써 발생합니다. 여기서 당신의 접근 방식을 다시 생각해 보시기 바랍니다. 이것은 저조한 동기 부여 유산으로 느낍니다.

모델을 단순하고 논리적 인 JavaScript 객체로 유지하십시오. 그런 다음 모든 데이터 구조에서 작동 할 단일 직렬화/지속성 계층을 사용해야합니다. 상속을 피하십시오, 여기서 도움이되지 않습니다. 경험에 비추어 볼 때 나는 composition over inheritance을 선호합니다.

마지막으로 대량 거래를 수행해야합니다. 당신의 영속 계층은 이제 분리되어 있기 때문에 영속 계층을 수정하여 한 번에 여러 자바 스크립트 객체를 업데이트 할 수 있습니다! 그런 다음, 다음과 같은 데이터 구조 받아들이는 서버의 트랜잭션 경로를 만들 수 있습니다 단일 통화가 전체 트랜잭션을 처리 할 수 ​​있기 때문에, 추가 보너스로

[ 
    ['create', 'project', {project_name: ...}] 
    ['create', 'client', {client_attrs}] 
] 

을, 당신은에 롤백 처리 할 수 ​​있습니다 서버는 조작 중 하나가 비즈니스 로직에 실패해야합니다. 난 그냥 당신이 프로젝트 ID로 클라이언트를 연결해야합니다 것을 깨달았다

업데이트. 클라이언트에서 ID를 생성 할 수 있다면 (UUID? 사용)이 방법은 그대로 작동합니다.

그렇지 않으면, 당신은 다음과 같이 임베디드 클라이언트와 프로젝트의 데이터 구조를 제출 전체 "중첩 된 속성"경로를 아래로 갈 수 있습니다

{ 
    project_name: "...", 
    clients: [{client1_attrs}, ...] 
} 

이 방법을 자주 사용되지만, 나는 그것을 좋아하지 않는다. 왜냐하면 내 경험상 거의 잘 작동하지 않기 때문이다. (삭제 처리 방법은 무엇입니까? 모든 속성을 지정하고 매번 연결된 모든 클라이언트를 업데이트해야합니까? 클라이언트가 여러 프로젝트와 연결되어있는 경우 어떻게됩니까? 얼마나 빨리 분해되는지 확인할 수 있습니다.)

UUID를 사용할 수 없다면 주어진 접근 방식은 트랜잭션 서버 컨트롤러에게 이전 단계에서 반환 된 값을 설정할 수있는 기능을 제공하는 것입니다.

이 데이터 구조는 트랜잭션 컨트롤러에 필드 ' id '를 직렬화하기 전에이 클라이언트에 대해 project_id로 설정하십시오.

[ 
    ['create', 'project', {project_name: ...}] 
    ['create', 'client', {client_attrs}, {project_id: [0, 'id']}] 
]