KnockoutJS 및 무한 루프

Question

KnockoutJS를 사용하여 비행을위한 간단한 무게 및 균형 응용 프로그램을 만들고 있습니다. 여기에는 암 (moment/weight)과 순간 (weight * arm)을 계산해야합니다. 보시다시피, 팔은 순간에 의존하고, 그 반대도 마찬가지입니다. 내가 가지고있는 문제는 사용자가 순간이나 팔 중 하나를 업데이트 할 때 무한 루프가 발생하여 중단해야한다는 것입니다.

function weightAndBalance(_arm) 
{ 
    var self = this; 
    this.weight = ko.observable(0); 
    this.arm = ko.computed(function() 
    { 
     if(parseFloat(self.weight()) == 0) 
     { 
      return _arm; 
     } 

     console.log("Arm: " + parseFloat(self.moment())/parseFloat(self.weight())); 
     return parseFloat(self.moment())/parseFloat(self.weight()); 
    }); 
    this.moment = ko.computed(function() 
    { 
     console.log("Moment: " + parseFloat(self.weight()) * parseFloat(self.arm())); 
     return parseFloat(self.weight()) * parseFloat(self.arm()); 
    }); 
} 

ko.applyBindings(new weightAndBalance(80.1)); 

그리고 내 마크 업 :

여기 내 코드의

<table> 
    <tr> 
     <th>Item</th> 
     <th>Weight</th> 
     <th>Arm</th> 
     <th>Moment</th> 
    </tr> 
    <tr> 
     <td>Front Passengers</td> 
     <td><input type="text" data-bind="value: weight" /></td> 
     <td><input type="text" data-bind="value: arm" /></td> 
     <td><input type="text" data-bind="value: moment" /></td> 
    </tr> 
</table> 

는 사용자가 무게를 입력해야하며, 현재 필드는 채워 져야합니다. 순간 필드를 수동으로 입력하는 경우 암을 자동으로 다시 계산해야합니다.

Fiddle form에 라이브 데모를 준비했습니다.

Answer 1

필자는 쓰기 가능한 계산 된 관찰 가능 항목에 의해 노출되는 "개인"관찰 가능 항목을 만들 것을 제안합니다.

3 개가 서로에 따라 다르므로 하나의 변수가 변경 될 때 "고정 된"변수를 결정하면 무한 루프에 대한 추가 위험을 방지 할 수 있습니다.

• 하면 무게 변경,가 업데이트되는 순간 팔을이 고정 된 채로 유지 :
  는 this fiddle에서 나는 다음과 같은 것을 수행했습니다.
• 순간 하면 변화는 팔가 업데이트되고 무게은 고정 된 상태로 유지됩니다.
• 하면 팔 변화는 순간가 업데이트되고 무게은 고정 된 상태로 유지됩니다.

은 "개인"관찰 가능한는 다음과 같다 :

_weight = ko.observable(parseFloat(initialWeight) || 0); 
_arm = ko.observable(parseFloat(initialArm) || 0); 
_moment = ko.observable(_weight() * _arm()); 

는 다음 세 가지 계산 관찰 가능한이 같이 :

self.weight = ko.computed({ 
    write: function (val) { 
     _weight(parseFloat(val)); 
     _moment(_arm() * _weight()); 
    }, 
    read: _weight 
}); 

self.arm = ko.computed({ 
    write: function (val) { 
     _arm(parseFloat(val)); 
     _moment(_arm() * _weight()); 
    }, 
    read: _arm 
}); 

self.moment = ko.computed({ 
    write: function(val) { 
     _moment(parseFloat(val)); 
     _arm(_moment()/_weight()); 
    }, 
    read: _moment 
}); 

이제 안전하게 세 가지 관찰 가능한 중 하나를 업데이트 할 수 있습니다. 순환 관측 문제를 방지하면서 다른 관찰 대상 중 하나만 변경됩니다.

Answer 2

계산 방법에 대해서만 읽기 메소드를 정의했습니다. 입력 된 정보를 얻으려면 쓰기 방법을 추가해야합니다.

저는을 만들고 여기에 3 개의 정규 관찰 값과 2 개의 데이터 처리 방법을 만듭니다. 나는 이렇게하는 것이 더 간단하고 무한 루프가 없다고 생각한다.

this.weight = ko.observable(0); 
this.arm = ko.observable(0); 
this.moment = ko.observable(0); 

this.computeArm = function() { 

    if (parseFloat(self.weight()) == 0) { 
     return _arm; 
    } 

    console.log("Arm: " + parseFloat(self.moment())/parseFloat(self.weight())); 
    self.arm(parseFloat(self.moment())/parseFloat(self.weight())); 
} 


this.computeMoment = function() { 
    console.log("Moment: " + parseFloat(self.weight()) * parseFloat(self.arm())); 
    self.moment(parseFloat(self.weight()) * parseFloat(self.arm())); 
}; 

도움이되기를 바랍니다.