Reputation: 1024
I am new to knockout.js and I'm getting an error with a simple test page, using MVC4 and Breez.js. I want to bind data to a table.
@{Layout = null;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Breeze Test</title>
<link rel="stylesheet" href="/Content/breezesample.css" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="~/">Breeze Test</a>
</p>
</div>
</div>
</header>
<div id="body">
<section id="content" class="content-wrapper main-content">
<script type="text/x-jquery-tmpl" id="BookTableTemplate">
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Price</th>
<th>Read?</th>
</tr>
</thead>
<tbody data-bind="template: {name:'bookRowTemplate', foreach:books}">
</tbody>
</table>
</script>
<script type="text/x-jquery-tmpl" id="bookRowTemplate">
<tr>
<td>${Title}</td>
<td>${Author}</td>
<td>${ISBN}</td>
<td>${Price}</td>
<td>${IsRead}</td>
</tr>
</script>
<div data-bind="visible: show" style="display: none">
<a href="#" data-bind="click: save">Save</a>
<input type="checkbox" data-bind="checked: IncludeRead" />
include read
<div data-bind="template: 'BookTableTemplate'"></div>
</div>
<div id="logmessages"></div>
</section>
</div>
<!--3rd party library scripts -->
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/knockout-2.1.0.js"></script>
<script src="/Scripts/q.js"></script>
<script src="/Scripts/breeze.debug.js"></script>
<!-- Application scripts -->
<script src="/Scripts/app/logger.js"></script>
<script src="/Scripts/app/bookViewModel.js"></script>
</body>
</html>
Instead of getting the data output I get: ${Title} ${Author} ${ISBN} ${Price} ${IsRead}
Upvotes: 0
Views: 786
Reputation: 108
Look at this example: http://knockoutjs.com/documentation/template-binding.html
In your template use <td data-bind="text: Title">/>
Upvotes: 3