백본 모델에서 속성을 설정하는 방법

Question

백본을 사용하여 내 응용 프로그램을 구현하려고하는데 오해가있을 수 있습니다.

특정 기본값을 사용하는 동안 특정 속성 (제목 등)을 지정하려고합니다. 하지만 사용자 정의 속성은 설정되지 않았습니다. 왜 그런가요? 속성

 var DataMapper = { 
      Models: {}, 
      Collections: {}, 
      Views: {}, 
      Templates: {} 
     }; 


     DataMapper.Views.OperatorView = Backbone.View.extend({ 
      el: "#op-panel", 
      operators: [], 
      events: { 
       "click #concat-op-btn": "addConcatOp" 
      }, 
      addConcatOp: function() { 
       var concatOperator = new DataMapper.Models.OpContainerBox({title: "Concat", inputCount: 2, outputCount: 1}); 
       this.operators.push(concatOperator); 
       concatOperator.drawContainer(); 
      } 
     }); 


     DataMapper.Models.OpContainerBox = Backbone.Model.extend({ 
      title: "Operator", 
      inputCount: 0, 
      outputCount: 0, 
      defaults: { 
       x: 400, 
       y: 40, 
       leaves: [], 
       height: 20, 
       width: 120 
      }, 
      drawContainer: function() { 
       console.log(this.title); //outputs "Operator" not "Concat" 
      } 
     }); 
     new DataMapper.Views.OperatorView(); 

Answer 1

백본 모델은 자바 스크립트 객체 속성와 동일하지 않습니다. 속성은 attributes 속성에 저장되며 get 및 set을 사용하여 속성을 사용할 수 있습니다. 속성은 this에 붙어 있으며 this.property_name을 통해 직접 액세스 할 수 있습니다.

당신은이 말을 할 때 :

DataMapper.Models.OpContainerBox = Backbone.Model.extend({ 
    title: "Operator" 
}); 

title는 속성이 아닌 속성이 될 것입니다. 당신이 말할 때 :

DataMapper.Models.OpContainerBox.new({ 
    title: 'Concat' 
}); 

백본 'Concat'에 title 속성을 설정합니다.

당신이 당신의 console.log 호출을 변경하는 경우 :

console.log(this.title, this.get('title')); 

을 당신은 콘솔에서 모두 'Operator' 및 'Concat' 볼 수 있습니다.

모든 기본값은 defaults 속성에 가야하고 기본값 중 하나를 변경할 수있는 경우에, 당신은 실수 참조 공유를 방지하기 위해 defaults하는 기능을 사용해야합니다

DataMapper.Models.OpContainerBox = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
      title: "Operator", 
      inputCount: 0, 
      outputCount: 0, 
      x: 400, 
      y: 40, 
      leaves: [], 
      height: 20, 
      width: 120 
     }; 
    }, 
    drawContainer: function() { 
     console.log(this.get('title')); 
    } 
}); 

당신이를 사용하지 않는 경우 함수가 defaults 인 경우 OpContainerBox 인스턴스는 해당 프로토 타입을 통해 정확히 defaults.leaves 배열을 공유합니다.

또한 get을 사용하여 속성에 액세스하려면 this.get('title')이 아닌 this.title을 사용해야합니다.

이 "프로토 타입을 통해 참조 공유"문제는 또한 OperatorView에 당신에게 operators 배열에 문제가 발생할 수 있습니다 그래서 당신은 대신이 말을 할 수 있습니다 :

DataMapper.Views.OperatorView = Backbone.View.extend({ 
    el: "#op-panel", 
    events: { 
     "click #concat-op-btn": "addConcatOp" 
    }, 
    initialize: function() { 
     this.operators = [ ]; // <---- One distinct array per instance. 
    }, 
    //... 
});