Knockout Bindings issue - data-binding

Question

I keep getting the error when I click on the button to load the data into the table. The data loads but chrome tools throw the error below.
You cannot apply bindings multiple times to the same element
The code I am running is as follows what do I have to change.
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">AM</li>
<li>CM</li>
<li>IM</li>
<li>KT</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="1">
<table class="table table-hover">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</table>
</div>
<div class="tab-pane" id="2">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Link</th>
<th>Link1</th>
</tr>
</thead>
<tbody data-bind="foreach: Questions">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: author"></td>
<td>
<button type="button" class="btn btn-link">Link</button>
</td>
<td>
<button type="button" class="btn btn-link" data-bind="text: questionLink"> </button>
<!--<a class="btn" type="button" href="http://example.com">Default (Gray) Button</a>-->
<!--<a class="btn" data-bind="href: questionLink">Default (Gray) Button</a>-->
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="3"></div>
<div class="tab-pane" id="4"></div>
<p><button id="clickMe" value="clickme" type="button" onclick="AddQuestions();">Load Questions</button></p>
<script type="text/javascript">
function AddQuestions() {
var self = this;
self.Questions = ko.observableArray();
self.Questions.push(new Question('1', '1', '1', '1', '1'));
self.Questions.push(new Question('2', '2', '2', '2', '2'));
ko.applyBindings();
function Question(label, id, title, author, questionLink) {
var self = this;
self.Label = ko.observable(label);
self.ID = ko.observable(id);
self.title = ko.observable(title);
self.author = ko.observable(author);
self.questionLink = ko.observable(questionLink);
}
}
</script>

Answer 1

The problem is you are calling ko.applyBindings more than once. You should only call this once per page.
function Questions() {
var self = this;
self.Questions = ko.observableArray();
self.addQuestions = function() {
self.Questions.push(new Question('1', '1', '1', '1', '1'));
self.Questions.push(new Question('2', '2', '2', '2', '2'));
};
function Question(label, id, title, author, questionLink) {
var self = this;
self.Label = ko.observable(label);
self.ID = ko.observable(id);
self.title = ko.observable(title);
self.author = ko.observable(author);
self.questionLink = ko.observable(questionLink);
}
}
ko.applyBindings(new Questions());
<button id="clickMe" value="clickme" data-bind="click: $root.addQuestions()">Load Questions</button></p>

Answer 2

You can call ko.applyBindings only once per DOM element.
Either call it once for the whole page with ko.applyBindings(viewmodel) or call it for the elements you want with ko.applyBindings(viewmodel, domElement).
Note that you can't call it on a jQuery object directly:
ko.applyBindings(viewmodel, $("#myObj"));
Won't work.
Use this instead if needed:
ko.applyBindings(viewmodel, $("#myObj").get(0));