Below is my code, i am trying to create table using knockout.js, but its not working. Table is not at all getting generated.
<html>
<head>
<title>Welcome to Collab-Todo</title>
<meta name="layout" content="main" />
</head>
<body>
<h style="margin-left:px;">Welcome to Collab-Todo</h>
<p style="margin-left:px;width:%">
Welcome to the Collab-Todo application. This application was built
as part of the Apress Book, "Beginning Groovy and Grails."
Functionally, the application is a collaborative "To-Do"
list that allows users and their buddies to jointly
manage "To-Do" tasks.</p><br />
<p style="margin-left:px;width:%">Building the Collab-Todo
application is used to walk the user through using Grails . to
build an application. Below is a list of controllers that are
currently deployed in this application. Click on each to execute
its default action:</p>
<br />
<div class="dialog" style="margin-left:px;width:%;">
<ul>
Hi Hello Word
</ul>
</div>
Test
<table>
<thead>
<tr>
<th class="checkbox no-padding">
<label>
<input type="checkbox" />
</label>
</th>
<th>
300
</th>
<!-- ko foreach: columns-->
<th data-bind="attr: {id: id}">
<div>
<div data-bind="html:name"></div>
</div>
</th>
<!-- /ko -->
</tr>
</thead>
<tbody >
<tr>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
var myViewModel = {
columns:[
{id:'title',name:'Title'},
{id:'documentLanguage',name:'Document Language'},
{id:'documentType',name:'Document Type'},
{id:'expirationDate',name:'Expiration Date'},
{id:'attachmentSize',name:'Attachment Size'},
{id:'targetAccounts',name:'Target Accounts'},
{id:'audienceType',name:'Audience Type'},
{id:'history',name:'History'},
{id:'action',name:'Action'}
]
};
ko.applyBindings(myViewModel);
</script>
</html>
Is there anything wrong in bindings of knockout, I am trying to create the table headers using so that it will generate a row for each row value in columns data, please help me with this
You have to add reference to the knockout.js. For example:
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js" type="text/javascript"></script>