2014-03-05 3 views
1

아이디어는 매우 간단하지만 다음 문제를 해결하는 방법을 알지 못합니다.KnockoutJS : 두 관찰 대상의 종속성 양방향

내가 원의 둘레를 계산하려면,

U = 2*Math.PI*R 

그래서, U는 주변 싶게 R은 원의 반지름입니다. 단방향 솔루션은 쉽습니다. HTML 코드는

R: <input data-bind="value: radius"><br> 
U: <input data-bind="value: periphery"> 

처럼 보이는 여기

function ViewModel() { 
    this.radius = ko.observable(1); 
    this.periphery = ko.computed(function(){ 
     var r = parseFloat(this.radius()); 
     return 2*Math.PI*r; 
    },this); 
} 

은 예입니다 같은 뷰 모델 보인다 : 나는 반경에 입력하고 얻을이 단방향-솔루션에서 http://jsfiddle.net/dundanox/2SsF9/

원의 둘레. 사실 나는 단순히 전체 솔루션을 되돌릴 수 있습니다. 주변을 설정하고 반지름을 얻으십시오. 그러나 나는 양방향 솔루션을 갖고 자한다. KnockoutJS로 어떻게 할 수 있습니까?

다음 단계는 원 (반경 또는 주변)이 변경되면 이벤트를 시작하는 것입니다. 보통 구독을 할 것입니다 :

vm.radius.subscribe(function(r){ // do someting }); 

그러나 단 한번의 방법으로 만 해결할 수 있습니다.

답변

1

간단하게 사용할 수있는 쓰기 가능한 계산 된 관찰 가능한

this.periphery = ko.computed({ 
    read: function() { 
     var r = parseFloat(this.radius()); 
     return 2 * Math.PI * r; 
    }, 
    write: function (value) { 
     var p = parseFloat(value); 
     var r = p/(2 * Math.PI) 
     this.radius(r); 
    }, 
    owner: this 
}); 

JSFIDDLE

+0

확인, 감사합니다,하지만 난 이미 시도이 솔루션. 그러면 반경은 1 차 또는 "중심"과 같은 것이고 주변은 2 차 관찰 가능합니다. 나는 더 분산 된 해결책을 염두에두고있다. 하지만 대부분의 경우 중앙 집중식 버전이 매우 적합하다고 생각합니다. 다음은 확장 된 예제 [JSFIDDLE] (http://jsfiddle.net/dundanox/6xP5m/7/)입니다. – user3356865