이 코드 조각을 다시 작성하는 방법

Question

이 함수 (*)와 (**)는 Backbone.View 안에 있지만이 문제를 해결하는 데 Backbone에 대한 지식이 필요하지 않다고 생각합니다. 때 코드에서 내 의견에서 볼 수 있듯이

:
1) 나는 getAvatar 기능 모든 것이 괜찮 전화 2
)이 getAvatar는 setAvatar 뭔가 내가 해결 방법을

깨 호출 할 때 다음 문제?

---

(*)

getAvatar: function() 
    { 
     var creatorIds = this.getCreatorIds(); 
     console.log(creatorIds); // [1,2] ****** here is ok ******* 

     for (var c = 0, l = creatorIds.length; c < l; c += 1) { 
      if (typeof this.avatars[creatorIds[c]] === 'undefined') { 
       this.userModel = new UserModel({id: creatorIds[c]}); 
       this.userModel.fetch(); 
       this.userModel.on('change', this.setAvatar, this);  
      } 
     } 
    }, 

---

(**)

setAvatar: function() 
    {  
     console.log(this.userModel.get('id')); // 2, 2 ********* it should be 1, 2 ******* 
     this.names[this.userModel.get('id')] = this.userModel.get('name'); 
     this.avatars[this.userModel.get('id')] = typeof this.userModel.get('avatar'); 
     this.render(); 
    }, 

---

(*)

,

initialize: function() 
{ 
    _.bindAll(this, 'getAvatar', 'setAvatar'); 
} 

Answer 1

는 backbone.js처럼 코드가

getAvatar: function() 
{ 
    var creatorIds = this.getCreatorIds(); 
    console.log(creatorIds); // [1,2] ****** here is ok ******* 

    for (var c = 0, l = creatorIds.length; c < l; c += 1) { 
     if (typeof this.avatars[creatorIds[c]] === 'undefined') { 
      this.userModel = new UserModel({id: creatorIds[c]}); 
      this.userModel.fetch(); 
      this.userModel.on('change', this.setAvatar, this); //added this after the function. 
     } 
    } 
}, 

것 on

object.on(event, callback, [context]) 

에 대한 상황에 대한 세 번째 매개 변수가 또는 폐쇄

getAvatar: function() 
{ 
    var that = this; //variable to maintain scope 
    var creatorIds = this.getCreatorIds(); 
    console.log(creatorIds); // [1,2] ****** here is ok ******* 

    for (var c = 0, l = creatorIds.length; c < l; c += 1) { 
     if (typeof this.avatars[creatorIds[c]] === 'undefined') { 
      this.userModel = new UserModel({id: creatorIds[c]}); 
      this.userModel.fetch(); 
      this.userModel.on('change', function(){ that.setAvatar(); }); //use a closure here with that variable that which is defined above.  
     } 
    } 
}, 

Answer 2

를 사용할 수 있습니다 같은데 문제는 동일한 변수를 두 번 할당한다는 것입니다. getAvatar()에서 먼저 다음 루프 반복에서 다음 아이디 == 1로 UserModel에 this.userModel을 설정합니다, 그것은 아이디 ==와 UserModel 할당됩니다 2.

setAvatar() 기능이 충돌하는 경우, 그것은 것입니다 this.userModel을보고 설정 한 값만 확인하십시오. 모델을 저장하기 위해 인스턴스 변수를 사용하지 않도록 노력해야합니다.

수정 방법은 다음과 같습니다. 아마 그것을 고칠 수있는 더 쉬운 방법이 있지만, 주어진 코드 샘플로부터 알기는 어렵습니다. 또한 코드의 이상한 점에 대해 몇 가지 의견을 추가했습니다.

(*) initialize``에서

getAvatar: function() 
{ 
    var creatorIds = this.getCreatorIds(); 
    console.log(creatorIds); // [1,2] ****** here is ok ******* 

    var self = this; 

    for (var c = 0, l = creatorIds.length; c < l; c += 1) { 
     if (typeof this.avatars[creatorIds[c]] === 'undefined') { 
      var user = new UserModel({id: creatorIds[c]}); 

      //probably better to bind the handler first, in case fetch() completes synchronously from cache 
      user.on('change', function(){ 
       console.log(user.get('id')); 
       self.names[user.get('id')] = user.get('name'); 
       self.avatars[user.get('id')] = typeof user.get('avatar'); //are you sure you want typeof here? 
       self.render(); //Note, this will get called a lot. Are you sure you want to do this? 
      }); 

      user.fetch(); 
     } 
    } 
}