Привязка шаблона

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>

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

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

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

Answer 1

Вы можете использовать синтаксис потока управления без контейнеров, привязку данных с помощью тегов комментариев. Нет необходимости в шаблоне. больше информации

<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

Следующие будут делать это:

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

Answer 3

Я не знаю простого способа доступа к индексу внутри шаблона. Вы можете использовать параметры шаблона, как описано в разделе Как использовать foreach со специальным первым элементом?

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

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