Ian Ian - 1 year ago 109
Javascript Question

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

I created a

project and used

I have a
which basically shows the a table with a couple of

My complete
is as follow:

@using Newtonsoft.Json;
@model IEnumerable<ATMMVCLearning.Models.Transaction>

ViewBag.Title = "Statement";


<table class="table table-striped table-bordered">
<td><strong>Transaction ID</strong></td>
<tbody data-bind="foreach:currentTransactions">
<td data-bind="text:Id"></td>
<td data-bind="text:formattedPrice"></td>
<td colspan="2">
<span data-bind="click:previousPage" class="glyphicon glyphicon-circle-arrow-left"
<span data-bind="text:currentPage"></span>
<span data-bind="click:nextPage"class="glyphicon glyphicon-circle-arrow-right"

<script src="~/Scripts/knockout-3.4.0.js"></script>
function formattedPrice(amount) {
var price = amount.toFixed(2);
return price;

function StatementViewModel() {
var self = this;

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

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

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

And the
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?


class is as follow:

public class Transaction {
public int Id { get; set; } //this is internally used, not need to have anything

public decimal Amount { get; set; }

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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download