백본의 내 뷰 배열 길이가 잘못 되었습니까?

Question

3 개의 뷰가 있으며 ViewA에는 ViewB 자식 컬렉션이 들어 있으며 각 뷰 B에는 ViewC 하위 컬렉션이 있습니다. 내가 CollectionB의 5 개 항목이있는 경우

ViewA: Backbone.View.extend({ 
    viewBChildren: [], 
    initialize: function() { 
    // Do stuff 
    var self = this; 
    // Generate children 
    this.model.get("CollectionB").each(function(b) { 
     var viewB = new ViewB({ 
     // set properties 
     }); 
     self.viewBChildren.push(viewB); 
     console.log(self.viewBChildren.length); // Prints out correctly 
    }); 
    } 
}); 

ViewB: Backbone.View.extend({ 
    viewCChildren: [], 
    initialize: function() { 
    var self = this; 
    this.model.get("CollectionC").each(function (c) { 
     var viewC = new ViewC({ 
     // Set properties  
     }); 
     self.viewCChildren.push(viewC); 
     console.log(self.viewCChildren.length); // Prints out a running total 
    }); 
    } 
}); 

그래서, 나는 또한 5 이것은 사실이고 잘 작동 할 viewBChildren.length을 기대.

제 문제는 viewCChildren.length을 인쇄 할 때입니다. CollectionB의 각 항목에 5 명의 자녀가있는 경우 5 번을 다섯 번 인쇄해야합니다. 대신 누계 5, 10, 15, 20, 25를 인쇄합니다.

다른 코드는 이러한 하위 모음을 처리하지 않으며 다른 방법으로 아직 수정하지 않습니다. 내보기의 initialize 메소드에서의 두 번의 호출 만 콜렉션에 영향을줍니다.

나는 범위 문제가 있다고 느끼지만, 내가 잘못한 것을 볼 수는 없습니다. 어떤 아이디어? 당신이보기에 정의

Answer 1

속성 :

var V = Backbone.View.extend({ 
    p: [ ], 
    ... 
}); 

그들은 V의 프로토 타입에 부착 남겨 따라서 V하고 모든 인스턴스간에 공유되는, 깊은 복사 한 경우에 없습니다 .

그걸 염두에두고 우리는 무슨 일이 일어나고 있는지 알 수 있습니다. 이 작업을 수행 할 때마다 :

self.viewCChildren.push(viewC); 

당신은 실제로 ViewB.prototype.viewCChildren.push(viewC)을하고있는 당신이 실행중인 총을 얻을 이유입니다. 예를 들어

, 우리는이 (http://jsfiddle.net/ambiguous/Z3QC6/) 할 경우 :

var V = Backbone.View.extend({ 
    a: [ ], 
    initialize: function() { 
     this.a.push('pancakes'); 
    } 
}); 

// The setTimeouts are to kludge around the asynchronous nature 
// of some console.logs. Play with the times if you're seeing 
// two element arrays for all the console.log calls. 
var v1, v2; 
console.log(V.prototype.a); 
setTimeout(function() { 
    v1 = new V(); 
    console.log(v1.a); 
    console.log(V.prototype.a); 
}, 100); 
setTimeout(function() { 
    v2 = new V(); 
    console.log(v1.a); 
    console.log(v2.a); 
    console.log(V.prototype.a); 
}, 500); 

은 우리가 콘솔이를 얻을 수 있습니다 다음

[] 
["pancakes"] 
[] 
["pancakes"] 
["pancakes"] 
[] 

보다는

[] 
["pancakes"] 
["pancakes"] 
["pancakes", "pancakes"] 
["pancakes", "pancakes"] 
["pancakes", "pancakes"] 

그 아마도 당신은 기대하고 있습니다. 당신이보기 인스턴스 속성으로 배열을 사용하려면

, 당신은 initialize에서 설정해야합니다 예를 들어

initialize: function() { 
    this.viewCChildren = [ ]; 
} 

,이 (http://jsfiddle.net/ambiguous/BjCvf/) :

var V = Backbone.View.extend({ 
    a: [ ], 
    initialize: function() { 
     this.a = [ ]; 
     this.a.push('pancakes'); 
    } 
}); 
// The rest as above 

이 콘솔을 생산합니다 출력 :

[] 
["pancakes"] 
[] 
["pancakes"] 
["pancakes"] 
[]