2012-06-04 2 views
0

backbone.js 사용 :중첩 된 모델 및 뷰를 구조화하는 방법은 무엇입니까?

여러 가지 특성을 포함하는 ModelA 컬렉션과 여러 ModelB를 포함하는 하나의 "노드"가 있습니다. ModelB는 또한 여러 속성을 포함합니다.

CollectionA 

ModelA 
    Attribute 1 
    . 
    . 
    Attribute n 
    "Node" 
    ModelB 
     Attribute 1 
     Attribute 2 
    ModelB 
     Attribute 1 
     Attribute 2 

ModelA 
    Attribute 1 
    . 
    . 
    Attribute n 
    "Node" 
    ModelB 
     Attribute 1 
     Attribute 2 
    ModelB 
     Attribute 1 
     Attribute 2 

저는 아직보기 작업을하고 있지만 기본 아이디어는보기가 비슷한 방식으로 구성되어야한다는 것입니다. 콜렉션 뷰는 여러 개의 뷰 B를 보유하고있는 여러 개의 뷰 A를 보유하고 있습니다. 동일한 ModelB는 여러 ViewB간에 절대 공유되지 않습니다.

1 : 디자인이 의미가 있습니까? 아니면 고려해야 할 명백한 결함입니까? (이것은 BackboneJs에서 처음 시도한 것입니다.)

질문 2 : "노드"를 설정하는 가장 좋은 방법은 무엇입니까? 지금은 ModelB 배열을 사용하고 있습니다. 대신 ModelB 컬렉션을 각 ModelA에 가질 수 있습니까? 어떤 접근 방식이 더 좋습니까?

모든 가이드 라인이 적합합니다.

나는 또한 this 관련 게시물에 대한 우수 게시물 (권장)을 읽었 음을 지적하고자합니다. 그러나이 경우에는 ModelB가 배열/컬렉션에 포함 된 것과 같은 방식으로 ModelB가 포함되지 않았습니다.

+0

백본과 함께 처음 시도하는 경우 더 쉽게 받아 들여야하며 간단한 것을 먼저 작성해보십시오. 그것은 내가 며칠 전에 이것을 게시했다 : http://stackoverflow.com/questions/10871369/how-to-handle-relations-in-backbone-js/10873385#10873385 특별히'getEventComments'를 언급하고 있습니다. 'node'와 정확히 무슨 뜻인지 잘 모르겠다. 의사 코드를 백본 코드로 바꿀 수 있겠는가? – Mosselman

답변

2

1 : 디자인이 의미가 있습니까? 아니면 고려해야 할 명백한 결함입니까? 디자인 가정 : 컬렉션 A에는 여러 모델이 있고 모델 A에는 모델 B 컬렉션이 있고 각 모델 B에는 자체보기 B가 있습니다.

Q2 : 각 ModelA에 ModelB 컬렉션이 있습니까?

답변 : Doable.

모델에 일련의 관련 하위 모델이 포함되어있는 경우가 일반적입니다. 배열, 객체, 모델 B를 보관할 콜렉션 (컨테이너라고 부르겠습니다)을 작성하여 확실히 알 수 있습니다. 기본 방법은 컨테이너를 작성한 다음 새 모델을 인스턴스화하는 것입니다. 이들을 연결하십시오. 모델 B에서 관련 상위 모델 A에 대한 일종의 참조가 필요하므로 나중에 해당 상태로 돌아갈 수 있습니다. 마찬가지로 각 모델 B는 특성으로 ModelA_ID를가집니다.

Paul Uithol의 Backbone-Relational을 사용하는 것이 좋습니다.

Backbone-Relational을 사용하면 모델 (클래스)을 설정하고 모델 B 컬렉션이있는 방식으로 정의 할 수 있습니다. 다음은 코드의 모양입니다. 이 작업을 수행 할 때

ModelA = Backbone.RelationalModel.extend({ 
    relations: [{ 
     type: Backbone.HasMany, 
     key: 'modelBs', 
     relatedModel: 'ModelB', 
     collectionType: 'ModelBCollection', 
     reverseRelation: { 
      key: 'parentA' 
     } 
    }], 
    defaults: ..., 
    initialize: ..., 
    etc. ... // Other instance properties and functions of model. 
}); 

, 당신은 MODELA를 통해 참조 할 수있는 모델 조식의 컬렉션을해야합니다 인스턴스화 모든 모델 A는 modelBs 때문이다. 또는 지정하는 키.

다음은 ModelA를 인스턴스화하는 모습입니다.

myModelA = new ModelA({ 
    // Setting up ModelA attributes... 
    'modelBs': [1, 3, 7] 
}); 

나는 MODELA를 인스턴스화 한 사용자가 정의한 수있는 다른 속성을 설정과 함께, 나는 또한 MODELA의 속성 modelBs에 대한 값을 설정하고 있습니다. 이것은 ModelA와 관련된 각 ModelB의 ID 배열입니다. 이 컬렉션은이 ModelA에 어떤 ModelB가 연관되어 있는지를 알 수있는 방법입니다.

myModelA.fetchRelated('modelBs'); 

귀하의 .fetchRelated() 전화는 간단 할 것, ModelB 1, 3과 modelBs 수집을 채울 수있는 서버에 요청을 전송하고

당신이 MODELA에서 ModelBs의 컬렉션에 액세스 할 7 이 같은.

myModelA.get('modelBs'); 

이 당신이 관련 모델을 가져했고 컬렉션이 그 안에 ModelBs을 가지고 가정이 MODELA 관련 ModelBs의 컬렉션을 반환합니다.

Backbone-Relational의 좋은 점은 상위 모델의 인스턴스 생성시 이러한 정의 된 관계를 자동으로 쉽게 설정할 수 있다는 것입니다. 또한 역 관계를 만들어서 부모에서 자식으로, 부모에서 자식으로 위아래로 이동하는 것이 쉽습니다.

ModelB를 조작하고 ModelA에 연결하려는 경우 reverse_elation 키를 사용하여 parentA을 설정했습니다.

someModelB.get('parentA'); // Points to the related ModelA 

는 또한 바인딩하고 모델에서 모델에서 모델이있을 때 지탱 다른 문제에 도움이됩니다. 관계형은 일대일, 일대 다 및 반비례 관계에서 잘 작동합니다. 많은 사람들과 많은 사람들이 일하는 방법이 있지만 상황이 설정되는 방식이 어렵다는 것이 일반적이라고 생각하지 않습니다.

견해에 관해서는, 나는 당신이 생각하는 것이 정확히 무엇인지 모르겠지만 견해의 "수집"이 필요합니까?

ModelB 컬렉션이있는 ModelA가 있다고 가정 해 보겠습니다. 각 ModelB에는 연관된보기가 있습니다. 이것은 구식 LIST의 개념과 함께 매우 잘 설명되어 있습니다.

<div id="ModelAView"> 
    <ul> 
     <li>ModelB_1</li> 
     <li>ModelB_3</li> 
     <li>ModelB_7</li> 
    </ul> 
</div> 

많은 ModelBs가 있지만 컬렉션에 멋지고 깔끔합니다. 뷰를 관리하는 데이터 지향적 인 방법을 사용하면 뷰 객체를 다른 목록에 배치 할 필요가 없습니다. 대신, 당신은 그들 스스로 관리 할 수 ​​있습니다!

// Assume when you instantiate ViewB, you pass to it a ModelB. 

ViewB = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('remove', this.remove, this); 
     this.model.bind('update:colorAttr', this.updateColor, this); 
    }, 
    updateColor: function() { 
     this.$el.css('color', this.model.colorAttr); 
    } 
}); 

이제 컬렉션에서 ModelB를 제거한다고 해봅시다.

myModelA.get('modelBs').remove(someModelB); 

그러면이 modelB와 연결된보기가 자동으로보기에서 제거됩니다.

마음에 들었는지 확실하지 않습니다. 나는 보통 이런 접근 방식을 사용한다. 어쨌든, 자세한 내용이 있다면 그냥 코멘트에 게시하십시오. 희망이 도움이됩니다.

관련 문제