knockoutjs binding troubles with table
I'm having trouble binding a viewmodel with array to a table. I have a template for the table and one for the rows. the table is created the rows are not? any ideas?
the code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1-vsdoc.js" ></script>
<script src="../../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.debug.js" type="text/javascript"></script>
<script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var model = {
Name: "john",
LastName: "do开发者_Python百科e",
Rows: [{ Amount: 1, Name: "rik", Description: "desc1" }, { Amount: 2, Name: "rik2", Description: "desc2"}]
}
var viewModel= ko.mapping.fromJS(model);
ko.applyBindings(viewModel);
});
</script>
<script type="text/x-jquery-tmpl" id="bankTemplate">
<table>
<tbody data-bind="template: 'bankRowTemplate', foreach: Rows">
</tbody>
</table>
</script>
<script type="text/x-jquery-tmpl" id="bankRowTemplate">
<tr>
<td>${Amount}</td>
<td>${Name}</td>
<td>${Description}</td>
</tr>
</script>
<input id="first" data-bind="value: Name" />
<input id="first2" data-bind="value: Name" />
<div data-bind="template: 'bankTemplate'"></div>
</body>
</html>
your <tbody ...>
, define that as
<tbody data-bind="template: {name:'bankRowTemplate', foreach: Rows}">
instead
精彩评论