중첩 된 뷰 및 모델을 구조화하는 backbone.js

중첩 된 뷰 및 모델을 구조화하는 backbone.js

---

backbone.js 사용 :

2 개의 속성과 2 개의 중첩 된 모델 인 ModelB와 ModelC를 포함하는 최상위 ModelA가 있습니다. ModelB 및 ModelC에는 다음과 같은 2 개의 속성이 있습니다.

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

ModelA에는 ViewA가 있고 ModelB에는 ViewB가 있습니다. ViewA의 배열 함수는 새 div를 본문에 배치하는 반면 ViewB의 회의는 h1을 배치합니다. ViewA의 초기화는 ViewB의 호출을 호출하여 h1을 새 div에 삽입합니다. 이 분리의 근거는 h1이 변경 될 수 있으며 ViewA와 독립적으로 다시해야할 것입니다.

ViewA
    initialise: 
        //call ViewA's own render function
        this.render() 

        //call ViewB's render function that further modifies the $("#new") div created earlier.
        $("#new").append(ViewB.render().el)

    //ViewA's own render function
    render: //place <div id="new"></div> onto 'body'

ViewB
    render: //create a <h1></h1>
    funcB1: //can this access it's parent ModelA's attributes and other objects?

Q1 : ViewB에는 funcB1 기능이 있습니다. 이 함수가 상위 모델의 속성에 액세스 할 수 있습니까? attributeA1 또는 attributeC1 (형제 / 사촌)과 같은 속성?

Q2 : Q1에 대한 추가 확장 확장 funcB1이 ViewA와 관련된 DOM 요소에 액세스 할 수 있습니까? (이 예에서는 #new div?)

Q3 : 일반적으로 모든 것이 가장 많이 연결되어있는 곳에서 뷰와 모델 연결을 어떻게 정의합니까?

나는이 질문이 다소 의미라는 것이 어떤 도움이나 지침에 감사드립니다.

---

관련 모델의 속성에 도달 할 수 있으려면 모델이 어떤 모델과 관련이 있는지에 대한 지식이 있습니다. Backbone.js는 관계 나 중첩을 암시 적으로 다루지 않습니다. 즉, 모델이 서로에 대해 존재하는지 확인해야합니다. 질문에 답하기위한 한 가지 방법은 각 하위 모델에 '부모'속성이 확인하는 것입니다. 이 방법을 사용하면 중첩을 먼저 상위로 이동 한 다음 알고있는 형제를 사용합니다.

질문에 대해 더 자세히 설명합니다. modelA를 초기화 할 때 아마도 modelB와 modelC를 만들 수있을 것입니다. 이렇게 할 때 다음과 같이 부모 모델에 대한 링크를 설정하는 것이 좋습니다.

ModelA = Backbone.Model.extend({

    initialize: function(){
        this.modelB = new modelB();
        this.modelB.parent = this;
        this.modelC = new modelC();
        this.modelC.parent = this;
    }
}

이렇게하면 this.parent를 호출하여 모든 하위 모델 함수의 상위 모델에 도달 할 수 있습니다.

뷰와 관련하여 중첩 된 백본 뷰를 수행 할 때 뷰의 tagName 옵션을 사용하여 각 뷰가 HTML 태그를 사용할 수 있도록 할 것이 더 있습니다. 나는 다음과 같이 당신의 견해를 쓸 것입니다.

ViewA = Backbone.View.extend({

    tagName: "div",
    id: "new",

    initialize: function(){
       this.viewB = new ViewB();
       this.viewB.parentView = this;
       $(this.el).append(this.viewB.el);
    }
});

ViewB = Backbone.View.extend({

    tagName: "h1",

    render: function(){
        $(this.el).html("Header text"); // or use this.options.headerText or equivalent
    },

    funcB1: function(){
        this.model.parent.doSomethingOnParent();
        this.model.parent.modelC.doSomethingOnSibling();
        $(this.parentView.el).shakeViolently();
    }

});

그런 다음 응용 프로그램 초기화 코드 (예 : 컨트롤러)에서 ViewA를 시작하고 해당 요소를 body 요소 안에 있습니다.

---

"Can I"라는 질문에 대한 대답은 항상 "코드를 작성하고자하는 한 예"입니다. Backbone의 핵심은 모델과 뷰를 강력하게 분리하는 것입니다. B1에 A1에 대한 참조가 있고 A1에 C1에 대한 참조가 있으면 B1이 A1과 C1 등을 사용할 수있는 방법을 찾을 수 있습니다.

뷰는 각 모델에서 CRUD 이벤트를 수신하도록 설정되어야합니다. 사용자가 B1model을 수정하는 B1view로 작업을 수행하고 B1model이 차례로 A1model을 수정하면 A1model은 A1view가 수신하고 A1view를 다시 렌더링하는 이벤트를 생성해야합니다. 마술처럼 일어나야합니다. (실제로는 마술을 제대로하는 데 시간이 좀 걸리지 만 Backbone이 정말 강력하다는 것을 알게되었습니다. BackboneRelational은 여기서 설명하는 것과 같은 작업에 도움이됩니다.)

---

위의 솔루션은 올바른 방향으로 가고 있지만 몇 가지 문제가 있습니다.

initialize: function(){
  this.viewB = new ViewB();
  this.viewB.parentView = this;
  $(this.el).append(this.viewB.el);    
}

주로 모델의 toJSON ()은 이제 오래된 데이터를 반환합니다. 이 문제를 해결하는 솔루션을 backbone.js 플러그인 에 게시했습니다 . 사용을 환영합니다.

---

예를 들어 Backbone-Forms https://github.com/powmedia/backbone-forms 와 같은 일부 확장을 사용할 수 있습니다 . 사용 사례를 따르려면 다음과 같은 스키마를 정의하십시오.

var ModelB = Backbone.Model.extend({
    schema: {
        attributeB1: 'Text',
        attributeB2: 'Text'
    }
});

var ModelC = Backbone.Model.extend({
    schema: {
        attributeC: 'Text',
    }
});

var ModelA = Backbone.Model.extend({
    schema: {
        attributeA1: 'Text',
        attributeA2: 'Text',
        refToModelB: { type: 'NestedModel', model: ModelB, template: 'templateB' },
        refToModelC: { type: 'NestedModel', model: ModelC, template: 'templateC' }
    }
});

부분 템플릿 은 https://github.com/powmedia/backbone-forms#customising-templates 를 참조하세요 .

여기서 중요한 부분은 type: 'NestedModel'및 template: 'templateXXX'입니다.

이 플러그인에는 몇 가지 제한 사항이 있지만 https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources 에서 다른 플러그인을 볼 수 있습니다 .

---

백본 용 모델간에 일대일, 일대 다 및 다 대일 관계를 제공하는 백본 플러그인 Backbone-relational.js가 있습니다.

이 js가 귀하의 요구를 충족시킬 것이라고 생각합니다. 자세한 문서는 Vist BackboneRelational 을 참조하십시오.

참고 URL : https://stackoverflow.com/questions/6353607/backbone-js-structuring-nested-views-and-models