올바른 녹아웃 바인딩 컨텍스트를 얻을 수 없습니다.

Question

내 녹아웃 바인딩을 수행하는 다음 javascript가 있습니다.

var context = this; 

var viewModel = { 
    lineitems: [{ 
     quantity: ko.observable(1), 
     title: 'bar', 
     description: 'foo', 
     price: ko.observable(10), 
     total: ko.observable(10), 
     formattedTotal: ko.computed({ 
     read: function() { 
      return '$' + this.price().toFixed(2); 
     }, 
     write: function (value) { 
      value = parseFloat(value.replace(/[^\.\d]/g, "")); 
      this.price(isNaN(value) ? 0 : value); 
     } 
     }) 
    }] 
}; 

ko.applyBindings(viewModel); 

예상대로 바인딩되지만 formattedTotal을 적용하면 다음과 같은 자바 스크립트 오류가 발생합니다.

Uncaught TypeError: Object [object global] has no method 'price' 

구문에 대한 몇 가지 변경 사항을 시도했지만 올바른 결과를 얻지 못했습니다. 어디에서 잘못 될까요?

Answer 1

읽을 수 있습니다 범위 - this을 - 당신의 ViewModel되지 않습니다. 이것을 시도하십시오 :

var viewModel = { 
    lineitems: [{ 
     quantity: ko.observable(1), 
     title: 'bar', 
     description: 'foo', 
     price: ko.observable(10), 
     total: ko.observable(10), 
     formattedTotal: ko.computed({ 
     read: function() { 
      return '$' + viewModel.lineitems.price().toFixed(2); 
     }, 
     write: function (value) { 
      value = parseFloat(value.replace(/[^\.\d]/g, "")); 
      viewModel.lineitems.price(isNaN(value) ? 0 : value); 
     } 
     }) 
    }] 
}; 

객체 리터럴 대신 viewmodels에 생성자 함수를 사용할 것을 고려하십시오. 이는 범위 문제를보다 쉽고 깨끗하게 처리합니다. 예를 들어 this answer을 참조하십시오.

Answer 2

일반적으로 JavaScript에 this을 사용하는 것은 좋지 않습니다. 특히 넉 아웃과. 실행 중에 this이 무엇인지 알 수 없습니다.

그래서 나는이 방법을 쓰는 것이 좋습니다

function LineItem(_quantity, _title, _description, _price) { 
    var self = this; 

    self.quantity = ko.observable(_quantity); 
    self.title = ko.observable(_title); 
    self.description = ko.observable(_description); 
    self.price = ko.observable(_price); 

    self.total = ko.computed(function() { 
     return self.price() * self.quantity(); 
    }, self); 

    self.formattedTotal = ko.computed(function() { 
     return '$' + self.total().toFixed(2); 
    }, self); 
}; 

var viewModel = { 
    lineItems: [ 
    new LineItem(10, 'Some Item', 'Some description', 200), 
    new LineItem(5, 'Something else', 'Some other desc', 100) 
] 
}; 

ko.applyBindings(viewModel); 

당신은 논의 문제는 당신 formattedTotal 방법 안에 대한 self=this 패턴 here.