Search code examples
knockout.jsknockout-templating

knockout template binding


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?


Solution

  • 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>