淘汰賽-而不是數據綁定值，而是顯示javascript

Question

我創建了一個ASP.Net MVC 5項目，並使用了Knockout.js庫。

我有一個名為Statement的View ，它基本上顯示了一個帶有幾個Transaction項目的表。

我完整的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>所見，我有兩個具有數據綁定屬性的<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以來已經有一段時間了。