ノックアウト - データバインド値の代わりに、javascriptが表示されます

Question

私はASP.Net MVC 5プロジェクトを作成し、Knockout.jsライブラリを使用しました。

私はStatementと呼ばれるViewを持っています。基本的には、Transactionという2つのテーブルを持つテーブルがあります。

Statement.cshtml私の完全なは以下の通りです：

@using Newtonsoft.Json; 
@model IEnumerable<ATMMVCLearning.Models.Transaction> 

@{ 
    ViewBag.Title = "Statement"; 
} 

<h2>Statement</h2> 

<table class="table table-striped table-bordered"> 
    <thead> 
    <tr> 
     <td><strong>Transaction ID</strong></td> 
     <td><strong>Amount</strong></td> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach:currentTransactions"> 
    <tr> 
     <td data-bind="text:Id"></td> 
     <td data-bind="text:formattedPrice"></td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="2"> 
     <span data-bind="click:previousPage" class="glyphicon glyphicon-circle-arrow-left" 
       style="cursor:pointer;"></span> 
     <span data-bind="text:currentPage"></span> 
     <span data-bind="click:nextPage"class="glyphicon glyphicon-circle-arrow-right" 
       style="cursor:pointer;"></span> 
     </td> 
    </tr> 
    </tfoot> 
</table> 

<script src="~/Scripts/knockout-3.4.0.js"></script> 
<script> 
    function formattedPrice(amount) { 
    var price = amount.toFixed(2); 
    return price; 
    } 

    function StatementViewModel() { 
    var self = this; 

    //properties 
    //note that there is a ko.observableArray for making bindings for array 
    self.transactions = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { 
         ReferenceLoopHandling = ReferenceLoopHandling.Ignore})); 
    //TODO: embed transactions from server as JSON array  
    self.pageSize = 5; //number of transactions to display per page 
    self.currentPage = ko.observable(1); //the first observable. If the page changes, then the grid changes 
    self.currentTransactions = ko.computed(function() { 
     var startIndex = (self.currentPage() - 1) * self.pageSize; //because currentPage is an observable, we get the value by calling it like a function 
     var endIndex = startIndex + self.pageSize; 
     return self.transactions.slice(startIndex, endIndex); 
    }); 

    //methods to move the page forward and backward 
    self.nextPage = function() { 
     self.currentPage(self.currentPage() + 1); 
    }; 

    self.previousPage = function() { 
     self.currentPage(self.currentPage() - 1); 
    }; 
    }; 

    ko.applyBindings(new StatementViewModel()); //note this apply bindings, used extensively in KnockOut 
</script> 

あなたが<tbody>で見ることができるように、私は、データバインド属性を持つ2つの<td>の要素があります。

<tbody data-bind="foreach:currentTransactions"> 
    <tr> 
     <td data-bind="text:Id"></td> 
     <td data-bind="text:formattedPrice"></td> 
    </tr> 
    </tbody> 

そしてformattedPriceを参照することができます次のスクリプトセクション：

function formattedPrice(amount) { 
    var price = amount.toFixed(2); 
    return price; 
    } 

これで、レンダリング時に表示される結果として、各ページに5つのトランザクションがあるテーブルが表示されるはずです。各テーブル行にはIdとトランザクション量が表示されます。私。以下のようなもの：

1 100.00 
2 150.00 
3 -40.00 
4 111.11 
5 787.33 

はしかし、私はページをレンダリングするとき、私は次のような結果だ：

代わりのIDと量を、私は、IDとjavascriptのを得ました。

更新：

Transactionクラス以下の通りである：

public class Transaction { 
    public int Id { get; set; } //this is internally used, not need to have anything 

    [Required] 
    [DataType(DataType.Currency)] 
    public decimal Amount { get; set; } 

    [Required] 
    public int CheckingAccountId{ get; set; } 

    public virtual CheckingAccount CheckingAccount { get; set; } //this is to force the entity framework to recognize this as a foreign key 
} 

Answer 1

formattedPriceはビューモデルの一部ではないため、Knockoutは自動的にアンラップしたり、amount引数を渡したりしません。

は、代わりにこれを試してみてください：

<td data-bind="text: formattedPrice(Amount)"></td> 

Answer 2

価格は、おそらくフィールドを計算する必要があり、あなたは（私が思う）価格にバインドする必要があります。私がKnockoutjsをやってからしばらくしている。