Ian Ian - 4 months ago 10
Javascript Question

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:

enter image description here

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
}

Answer

Since formattedPrice is not part of your view-model, Knockout won't automatically unwrap it, nor it will pass it the amount argument.

Try this instead:

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