This is probably the one question I get asked the most about KnockoutJS.
Why is my 'some random html node' not apearing on my page?
And this is often followed up with a code sample similar to:
<!-- ko foreach: myList -->
<th data-bind="text: label">
<button>*</button>
</th>
<!-- /ko -->
In this case the button
node isn't being shown in the rendered html.
Now the reason for this is that when you use the data-bind="text: label"
attribute on a node, knockout will then replace the entire contents of that node with the contents of the label
variable. This will overwrite the button within original node.
The way to get around this problem is to bind the label to a separate span
node (or whatever is suitable) within the th
like so:
<!-- ko foreach: myList -->
<th>
<span data-bind="text: label" ></span>
<button>*</button>
</th>
<!-- /ko -->
Problem solved.