3

KnockOut の操作 - MVC .Net コードに追加する前に、マスター詳細/アイテム アプリの基本を構築しようとしています。

私がやりたいのは、単純なアイテム、価格、税を用意することだけです - そして、各アイテムの税込みの金額を表示する計算列の場合:

クライアント側の KnockOut ビューモデルは次のとおりです。

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 });

テーブルのマークアップは次のとおりです。

<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>

formattedPrice機能が動作していないように見えるため、停止しています。

ここのjsfiddleでそれを手に入れました：http://jsfiddle.net/marktait/TR6Sy/ - この一見単純なハードルを乗り越えるのを手伝ってくれる人はいますか?

ありがとうございました、

マーク

4

3 に答える 3

2

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);
};
于 2013-05-14T13:22:54.720 に答える
0

閉じ括弧が足りないようです-

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

する必要があります

return pricet ? "$" + pricet.toFixed(2) * (1 + self.gifts().tax) : "None";
于 2013-05-14T13:14:30.807 に答える