자식 뷰의 부모 뷰에 새 컬렉션 추가

Question

옵션 목록을 표시하는 자식 뷰가 포함 된 상위 뷰 (자동차 엔진 용)가 있습니다. 옵션 중 하나는 상위보기에 새 모음을 추가하는 것입니다.

내 아이보기 init 함수는 다음과 같습니다

다음

initialize: function (engine) { 
    this.engine = engine; //parent object 
    this.valves = engine.valves; //may or may not be empty 
}; 

I이 버튼을 누를 때 컬렉션 (밸브)을 추가,이 방법

addPerformanceValves: function() { 
    var self = this; 
    if (this.valves.lentgh == 0) { 
     this.valves = new ValveCollection(); 
     this.valves.url = function() { 
      return '/api/engines/auto/performance/parts/' + self.id + '/valves'; 
     } 
    } 
    this.$('.performanceParts').show(); 
} 

을 이제 내가 만든 새 컬렉션, 부모에게 어떻게 추가합니까?

Answer 1

그 방법에는 여러 가지가 있습니다.

계층 구조가 이미하고있는 것처럼

아래 부모 객체를 전달, 당신은 새 컬렉션을 전달하는 상위 개체에서 함수를 호출 할 수있다. 강력한 결합을 방지하기

var Child = Backbone.View.extend({ 
    initialize: function(options) { 
     options = options || {}; 
     this.engine = options.engine; //parent object 
     this.valves = engine.valves; //may or may not be empty 
    }, 
    addPerformanceValves: function() { 
     var self = this; 
     if (this.valves.lentgh == 0) { 
      this.valves = new ValveCollection(); 
      this.valves.url = function() { 
       return '/api/engines/auto/performance/parts/' + self.id + '/valves'; 
      } 

      // call the parent 
      this.engine.addNewCollection(this.valves); 
     } 
     this.$('.performanceParts').show(); 
    } 
}); 

var Parent = Backbone.View.extend({ 
    addNewCollection: function(collection) { 
     // do what you want with the collection 
     this.newCollection = collection; 
    } 
}); 

트리거링 이벤트

한 가지 방법은 부모가 인식하는 아이 뷰에서 이벤트에 트리거하는 것입니다.

var Child = Backbone.View.extend({ 
    initialize: function(options) { 
     options = options || {}; 
     this.valves = options.valves; //may or may not be empty 
    }, 
    addPerformanceValves: function() { 
     var self = this; 
     if (this.valves.lentgh == 0) { 
      this.valves = new ValveCollection(); 
      this.valves.url = function() { 
       return '/api/engines/auto/performance/parts/' + self.id + '/valves'; 
      } 

      // call the parent 
      this.trigger('child:collection', this.valves); 
     } 
     this.$('.performanceParts').show(); 
    } 
}); 

var Parent = Backbone.View.extend({ 
    initialize: function() { 
     this.child = new Child({ valves: this.valves }); 

     // listen to child view events 
     this.listenTo(this.child, 'child:collection', this.addNewCollection); 
    }, 
    addNewCollection: function(collection) { 
     // do what you want with the collection 
     this.newCollection = collection; 
    } 
}); 

그런 다음 하위보기에는 필요한 것만 있습니다. 적절한 장소에서 책임을 지키는 데 도움이됩니다.