I have an ul element which is filled through template binding.
<script type="text/html" id="someTemplate">
<li>
<span data-bind="text: someText">
</li>
</script>
<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
</ul>
But I want the first li-tag would not be li-tag from template but another one with button in it and it will not be connected to someElemets array. If I do in that way
<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
<li><button data-bind=click: doSomething">Click me</button></li>
</ul>
then li-tag with button will be the last one after rendering. What is the best way to solve that problem?
You can use containerless control flow syntax, databinding using comment tags. No need for a template. more info
<ul>
<li><button data-bind=click: doSomething">Click me</button></li>
<!-- ko foreach: someElemets-->
<li>
<span data-bind="text: someText"></span>
</li>
<!-- /ko -->
</ul>