нокаут шаблон привязки

Question

У меня есть элемент ul, который заполняется посредством привязки шаблона.

<script type="text/html" id="someTemplate"> 
<li> 
    <span data-bind="text: someText"> 
</li> 
</script> 

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> 
</ul> 

Но я хочу первый литий-тег не будет ли-тег из шаблона, но другой один с кнопкой в ​​нем, и он не будет подключен к массиву someElemets. Если я так сделаю

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> 
    <li><button data-bind=click: doSomething">Click me</button></li> 
</ul> 

тогда li-tag с кнопкой будет последним после рендеринга. Каков наилучший способ решить эту проблему?

Answer 1

Вы можете использовать containerless синтаксис потока управления, Databinding с помощью тегов комментариев. Нет необходимости в шаблоне. 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> 

Answer 2

Я не знаю, как легко получить доступ к индексу внутри шаблона. Можно использовать параметры шаблона, как описано в How to use foreach with a special first element?

Ваш код будет что-то вроде:

<ul data-bind="template: { name: 'someTemplate', foreach: someElemets, templateOptions: { first: someElemets()[0]} }"> 
</ul> 

<script id="someTemplate" type="text/html"> 
    <li> 
    {{if $item.first === $data}} 
     <button data-bind="click: doSomething">Click me</button> 
    {{/if}} 
    <span data-bind="text: someText"> 
    </li> 
</script> 

Answer 3

Ниже будет делать это:

<!-- ko template: { name: 'template-name', data: vm } --> <!-- /ko -->