javascript - Knockout - 显示 javascript 而不是数据绑定(bind)值

Question

我创建了一个 ASP.Net MVC 5项目和使用Knockout.js图书馆。

我有一个 View称为 Statement它基本上显示了带有几个 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>具有数据绑定(bind)属性的元素:

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

现在，我希望生成的 View 在呈现时应该显示一个表格，每页有 5 个交易，其中每个表格行显示一个 ID 及其交易金额。 IE。像这样的东西:

1  100.00
2  150.00
3  -40.00
4  111.11
5  787.33

但是，当我渲染页面时，我得到了以下结果:

我得到的不是 Id 和 amount，而是 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 不是您的 View 模型的一部分，Knockout 不会自动解包它，也不会向它传递 amount 参数。

试试这个:

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