KnockOut의 계산 된 기능 문제

Question

KnockOut 사용 - MVC .Net 코드에 추가하기 전에 마스터 세부 정보/항목 앱의 기초를 작성하려고합니다.

이

클라이언트 측 녹아웃 뷰 모델은 다음과 같습니다 :

var GiftModel = function(gifts) { 
var self = this; 
self.gifts = ko.observableArray(gifts); 

self.formattedPrice = ko.computed(function() { 
    var pricet = self.gifts().price; 
    return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax : "None"; 

});  

self.addGift = function() { 
    self.gifts.push({ 
     name: "", 
     price: "", 
     tax:0 
    }); 
}; 

self.removeGift = function(gift) { 
    self.gifts.remove(gift); 
}; 

self.save = function(form) { 
    alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts)); 
    // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts); 
}; 
}; 

var viewModel = new GiftModel([ 
{ name: "Tall Hat", price: "39.95", tax:17.5}, 
{ name: "Long Cloak", price: "120.00", tax:20} 
]); 
ko.applyBindings(viewModel); 

// Activate jQuery Validation 
$("form").validate({ submitHandler: viewModel.save }); 

및 계산 열의 각 항목에 대한 세금을 포함한 금액을 표시 -

내가하고 싶은 모든 간단한 항목, 가격, 세금을 가지고있다

표 마크 업 : 그것은 작동하는 표시 나던 formattedPrice 함수로 실속 것

<table data-bind='visible: gifts().length > 0'> 
     <thead> 
      <tr> 
       <th>Gift name</th> 
       <th>Price</th> 
       <th>Tax</th> 
       <th /> 
      </tr> 
     </thead> 
     <tbody data-bind='foreach: gifts'> 
      <tr> 
       <td><input class='required' data-bind='value: name, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: price, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: tax, uniqueName: true' /></td> 
       <td data-bind='text: formattedPrice'></td> 
       <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td> 

      </tr> 
     </tbody> 
    </table> 

    <button data-bind='click: addGift'>Add Gift</button> 
    <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button> 

.

여기에 jsfiddle이 있습니다. http://jsfiddle.net/marktait/TR6Sy/ -이 겉으로보기에는 단순한 장애물을 극복하는 데 도움이 될만한 사람이 있습니까?

방금 ​​닫는 괄호를 누락 것 같습니다

마크

Answer 1

문제는 선물 목록에 반복하는 동안 comouted 함수를 호출하는 것입니다. 그러나 계산 된 방법은 주어진 선물에 사용할 수 없으며 모든 선물에 대해 사용할 수 있습니다. 두 가지 선택이 있습니다 :

각 선물 개체가 (Brandon 사용자가 제안한 것처럼)이 계산 된 메서드를 사용하여 개체로 만들거나 그냥 매개 변수로 선물을 가져 오는 일반 함수로 변환하십시오. 이 :

self.getFormattedPrice = function(price, tax) { 
    var val = price ? "$" + parseFloat(price).toFixed(2) * (1 + tax) : "None"; 
    return val; 
};  

그리고, 당신은 다음과 같이 호출 :

<td data-bind='text: $parent.getFormattedPrice(price, tax)'></td> 

나는 당신의 fiddle 업데이트되었습니다.

Answer 2

, 감사 -

return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax : "None"; 

이

return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax) : "None"; 

Answer 3

self.gifts()가 배열해야한다. 그러나 귀하의 계산에서, 당신은 하나의 가치로 그것을 사용하려고합니다. 그건 그냥 작동하지 않습니다. 당신은 배열의 각 항목에 계산 된 속성으로 추가해야합니다

var addFormattedPrice = function (gift) { 
    gift.formattedPrice = ko.computed(function() { 
     var pricet = gift.price; 
     return pricet ? "$" + pricet.toFixed(2) * (1 + gift.tax : "None"; 
    }); 
}; 

ko.utils.arrayForEach(self.gifts(), addFormattedPrice); 

self.addGift = function() { 
    var gift = { 
     name: "", 
     price: "", 
     tax:0 
    }; 
    addFormattedPrice(gift); 
    self.gifts.push(gift); 
};