[英]Knockout - Instead of the data-bind value, javascript is displayed
I created a ASP.Net MVC 5
project and used Knockout.js
library. 我创建了一个
ASP.Net MVC 5
项目,并使用了Knockout.js
库。
I have a View
called Statement
which basically shows the a table with a couple of Transaction
items. 我有一个名为
Statement
的View
,它基本上显示了一个带有几个Transaction
项目的表。
My complete Statement.cshtml
is as follow: 我完整的
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>
As you can see in the <tbody>
I have two <td>
elements which have data-bind attribute: 如您在
<tbody>
所见,我有两个具有数据绑定属性的<td>
元素:
<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: 而且
formattedPrice
可以参考下面的脚本部分:
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. 现在,我希望结果视图在呈现时应该在每个页面上显示一个包含5个事务的表,其中每个表行都显示一个ID及其事务量。 Ie 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 . 我没有Id和金额 ,而是获得了Id和javascript 。
Any idea? 任何想法?
Update: 更新:
The Transaction
class is as follow: 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
}
Since formattedPrice
is not part of your view-model, Knockout won't automatically unwrap it, nor will it pass it the amount
argument. 由于
formattedPrice
不在视图模型中,因此Knockout不会自动对其进行包装,也不会将其传递给amount
参数。
Try this instead: 尝试以下方法:
<td data-bind="text: formattedPrice(Amount)"></td>
Price probably needs to be computed field and you need to bind to price (I think). 价格可能需要计算字段,并且您需要绑定价格(我认为)。 It's been a while since I did Knockoutjs.
自从我做了Knockoutjs以来已经有一段时间了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.