Knockout - Instead of the data-bind value, javascript is displayed

I created a ASP.Net MVC 5 project and used Knockout.js library.

I have a View called Statement which basically shows the a table with a couple of Transaction items.

My complete Statement.cshtml is as follow:

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

As you can see in the <tbody> I have two <td> elements which have data-bind attribute:

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

And the formattedPrice can be referred to the script section below:

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

Now, I expect the resulting View when it is rendered should show a table with 5 transactions each page, where each table row shows an Id as well as its transaction amount. I.e. something like:

1  100.00
2  150.00
3  -40.00
4  111.11
5  787.33

However, when I render the page, I got the following result:

Instead of Id and amount, I got Id and javascript.

Any idea?

Update:

The Transaction class is as follow:

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
}