backbone.js 인스턴스에 고유하지 않은 중첩 된 모델의 객체

Question

기본적으로 부모 모델이 있고 중첩 모델이 있습니다. 중첩 된 모델 자체에는 defaultValue 및 userValue가있는 객체 인 propertyA가 있습니다. 아이디어는 부모 모델의 모든 인스턴스가 null의 userValue와 정적 기본값을 갖는 중첩 모델과 함께 제공된다는 것입니다.

문제는 하나의 인스턴스에 대해 userValue를 업데이트하면 앞으로 모든 인스턴스가 변경되는 문제입니다. 특정 인스턴스에 대해 userValue를 업데이트하는 대신 잘못된 작업을 수행하고 중첩 된 모델 "프로토 타입"을 업데이트합니다.

아래 코드는 http://jsfiddle.net/GVkQp/4/입니다. 도와 주셔서 감사합니다.

var ParentModel = Backbone.Model.extend({ 
    initialize: function(){ 
     var defaultObjs = { 
      nestedModel : new NestedModel() 
     }; 
     $().extend(this.attributes, defaultObjs); 
    } 
}); 


var NestedModel = Backbone.Model.extend({ 
    defaults: { 
     "propertyA" : { 
         "defaultValue" : "ABC", 
         "userValue": null 
         } 
    } 
}); 

var ParentView = Backbone.View.extend({ 
    initialize: function(){ 
     var self = this; 
     var defaultValue = self.model.get("nestedModel").get("propertyA")["defaultValue"]; 
     var userValue = self.model.get("nestedModel").get("propertyA")["userValue"]; 

     var div = $("<div class='box'>defaultValue = <span id='defaultValue'>" + 
        defaultValue+ "</span>, userValue = <span id='userValue'>" + 
        userValue + "</span></div>"); 
     var divButton = $('<input type="button" value="Change my userValue to DEF">') 
      .click(function(){ 
      temp = self.model.get("nestedModel").get("propertyA"); 
      temp.userValue = "DEF"; 
      //wherewas my intention is just to set the userValue for a particular instance, 
      //generating another instance of ParentView (by clicking button) reveals that 
      //the userValue is set even for new instances. 
      //How can I change it such that I only change the userValue of the particular 
      //instance? 

      //set value 
      self.model.get("nestedModel").set({"propertyA": temp}); 

      //update userValue in View 
      userValue = self.model.get("nestedModel").get("propertyA")["userValue"]; 
      $(this).parent().find("span#userValue").text(userValue);  
     });  

     //append divButtont to div 
     div.append(divButton) 

     //append div to body 
     $('body').append(div) 
    }, 
}); 

$("#add").click(function(){ 
    var newBoxView = new ParentView({ 
     model: new ParentModel() 
    }); 
}); 

Answer 1

jsFiddle에게 감사드립니다. 그것은 당신의 문제를 완벽하게 설명합니다.

기본값으로 "propertyA"를 설정하면 작성한 오브젝트가 작성한 다른 모든 중첩 클래스와 함께 복사되는 기본값이 표시됩니다. 이러한 이유로 사용자가 defaults을 정의 할 때마다 매번 기본값을 새로 작성하기 위해이를 함수로 정의 할 수있는 옵션이 있습니다. 이렇게하면 문제가 해결됩니다.

var ParentModel = Backbone.Model.extend({ 
    defaults: function() { 
     return {nestedModel: new NestedModel()}; 
    } 
}); 


var NestedModel = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
     "propertyA" : { 
         "defaultValue" : "ABC", 
         "userValue": null 
         } 
     }; 
    } 
});