백본보기 속성은 다음

Question

을 정의되지 않은 내 생각이다, 리턴 : 당신은 내가 빈 객체를 포함하도록 _EventViews 속성을 설정 볼 수 있듯이

define(
    [ 
     "jquery" 
    , "underscore"  
    , "backbone" 
    , "eventView" 
    ] 
, function($, _, Backbone, EventView) { 
     "use strict"; 

     var TimelineView = Backbone.View.extend({ 
      tagName: 'div' 
     , className: 'column' 

     , _EventViews: {} // Cache event views for reuse 

     , initialize: function() { 
       this.collection.bind('add', this.add); 
       this.collection.bind('reset', this.add); 
      } 

     , render: function() { 
       return this; 
      } 

      // Listen for additions to collection and draw views 
     , add: function(model) { 
       var eventView = new EventView({ 
        model: model 
       }); 

       // Cache the event 
       console.log(this._EventViews); 
       this._EventViews[model.get('id')] = eventView; 

       // Draw event 
       eventView.render(); 
      } 
     }); 

     return TimelineView 
    } 
); 

. 그러나 add() 함수를 호출하면 console.log(this._EventViews)은 정의되지 않은 값을 반환하고 다음 문은 실패합니다.

아무도 왜 이것이 내게 말할 수 있습니까?

Answer 1

문제는 add 내 this이 TimelineView되지 않는 것입니다. 자바 스크립트에서 문맥에 대한 설명은이 기사를 참조하십시오. https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

몇 가지 방법으로 해결할 수 있습니다. 이 상황에서 가장 쉬운 방법은 bind 또는 on의 세 번째 매개 변수를 사용하는 것입니다.이 두 매개 변수는 동일합니다.

initialize: function() { 
      this.collection.on('add', this.add, this); 
      this.collection.on('reset', this.add, this); 
     } 

또는 대신 listenTo을 사용하십시오.

initialize: function() { 
      this.listenTo(this.collection, 'add', this.add); 
      this.listenTo(this.collection, 'reset', this.add); 
     } 

또한, 당신의 _EventViews 캐시 TimelineView의 모든 인스턴스에 의해 공유됩니다. 원하는 내용이 아닌 경우 initialize에 대신 작성하십시오.

initialize: function() { 
      this._EventViews = {}; 
      this.listenTo(this.collection, 'add', this.add); 
      this.listenTo(this.collection, 'reset', this.add); 
     } 

Answer 2

그것은 나를 위해 작동 :

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://underscorejs.org/underscore-min.js"></script> 
<script src="http://backbonejs.org/backbone.js"></script> 
<script> 

var TimelineView = Backbone.View.extend({ 
    tagName: 'div' 
, className: 'column' 

, _EventViews: {} // Cache event views for reuse 

, initialize: function() { 
     //this.collection.bind('add', this.add); 
     //this.collection.bind('reset', this.add); 
    } 

, render: function() { 
     return this; 
    } 

    // Listen for additions to collection and draw views 
, add: function(model) { 
     var eventView = ({ 
      model: model 
     }); 

     // Cache the event 
     console.log(this._EventViews); // Prints: Object {} 
     this._EventViews[model.get('id')] = eventView; 

     // Draw event 
     eventView.render(); 
    } 
}); 

var a = new TimelineView(); 
a.add(); 

</script> 

나는 문제가 컬렉션 add 이벤트에서 호출 된 .add() 방법이라고 생각합니다. (백본에 .bind() 기능 수행에) 당신은 리스너를 추가 할 때해야 bind 기능 (기본 의미에) :

_.bindAll(this, 'add'); 

또는

this.add = this.add.bind(this); 

당신은 전에 그것을해야 청취자로서 기능을 추가

initialize: function() { 
    _.bindAll(this, 'add'); 
    this.collection.bind('add', this.add); 
    this.collection.bind('reset', this.add); 
}