2013-09-30 10 views
7

백본을 사용하여 첫 번째 실제 웹 앱을 구축 중이며 중첩 된 리소스로 고심하고 있습니다.컬렉션의 백본 컬렉션

이 내가 함께 일하고 있어요 JSON 응답의 단순화 된 버전입니다 :

{ 
    "id": 1, 
    "title": "Test Survey", 
    "groups": [ 
    { 
     "id": 1, 
     "title": "Basic Questions", 
     "questions": [ 
     { 
      "id": 1, 
      "title": "Which is your favorite color?" 
     }, 
     { 
      "id": 2, 
      "title": "Do you have any other hobbies?" 
     } 
     ] 
    }, 
    { 
     "id": 2, 
     "title": "Working Questions", 
     "questions": [ 
     { 
      "id": 3, 
      "title": "Do you think working exp is very important?" 
     } 
     ] 
    } 
    ] 
} 

는 기본적으로 여러 그룹이있는 설문 조사 객체를 프로그래머가 각 그룹은 많은 질문이 있습니다.

이 데이터를 모델/컬렉션으로 가져 오는 좋은 방법을 찾을 수없는 것 같습니다.

내가 현재 가지고 것은 :

// Models 
var Question = Backbone.Model.extend({}); 
var Group = Backbone.Model.extend({}); 
var Survey = Backbone.Model.extend({ url: surveyURL }); 

// Collections 
var GroupsCollection = Backbone.Collection.extend({}); 
var QuestionsCollection = Backbone.Collection.extend({}); 

//Views 
var SurveyView = Backbone.View.extend({ 
    .. 
}); 

var GroupsCollectionView = Backbone.View.extend({ 
    .. 
}); 

var QuestionsCollectionView = Backbone.View.extent({ 
    .. 
}); 

var survey = new Survey({ groups: new GroupsCollection({model: Group}) }); 
var groupsView = new GroupsCollectionView({collection: survey.get('groups')}); 

이 설문 조사 모델에서 그룹을 중첩에 대해 작동하는 것 같다,하지만 난 다음 컬렉션의 질문에 저장하고 어떻게 그룹] 컬렉션의 각 모델에 그 지정 ?

앞서 언급 한 것처럼 나는 백본에 비교적 익숙하지 않기 때문에 완전히 잘못된 경로로 넘어가거나 더 좋은 방법이 있다면 알려 주시기 바랍니다.

건배. 그들을 채울 model.parse를 사용

답변

4

나는 보통 내 개체의 속성으로 내 서브 컬렉션을 선언합니다 (예에, 그 대신 survey.get('groups')survey.groups를 참조 의미 나는 속성 해시에서 제거). 당신의 Survey 모델

:

var GroupsCollection = Backbone.Collection.extend({ 
    model: Group 
}); 

var Survey = Backbone.Model.extend({ 
    initialize: function(data) { 
     this.groups = new GroupsCollection(); 
     this.parse(data); 
    }, 
    parse: function(data) { 
     if (data.groups) { 
      this.groups.reset(data.groups); 
     } 
     return _.omit(data, 'groups'); 
    } 
}); 

귀하의 Group 클래스는 비슷한 방식으로 선언 될 것이다. 데이터를 생성자에 전달합니다.

var s = new Survey({ 
    "id": 1, 
    "title": "Test Survey", 
    "groups": [], 
    ... 
}); 

var g = s.groups.at(0); //first group 
var q = g.questions.at(0); //first question in the first group 

데이터를 트래버스하여 전체 계층 구조를 작성합니다.

그리고 데모 http://jsfiddle.net/nikoshr/947Vf/

+0

감사합니다. 귀하의 답변은 많은 의미가 있습니다. 나는 내가 여기에서 그것을 이해할 수있을 것이다라고 생각한다. 건배. –

0

위의 대답은이 질문에 나를 이끌어 내 경우에 대한 약간 무거운 무게였다. 이것은 검색하는 다른 누구에게나 도움이 될 수 있습니다.

나는 4 개의 컬렉션을 만들었습니다. 그것들은 컬렉션에 포함되어야했다. 콜렉션 뷰는 4 개의 콜렉션 뷰를 더 포함 할 것이다. 콜렉션 뷰는 자식 뷰 (평범한 뷰)가 데이터를 렌더링한다. 나는 포장 수집 나는 4 개 가지 모델을, 포함 된 컬렉션을 반환

new Backbone.Collection([collectionA, collectionB, collectionC, collectionD])

을 만들어

모두의 백본 모델했다. 그 모델에 내 컬렉션이 포함되어 있지 않으면 아무 문제가 없습니다.

모델을 래핑하여 해결했습니다. 각 모델에는 네 개의 컬렉션 중 하나가 포함되어 있습니다.

var wrapperModelA = new Backbone.Model({ collection: collectionA }); 
... 
var wrapperModelD = new Backbone.Model({ collection: collectionD }); 

return new Backbone.Collection([wrapperModelA, ... , wrapperModelD]); 

이 내 컬렉션을 보존하고 나에게 새로운 클래스를 정의하지 않고 중첩 수집 구조를 만들 수있었습니다.