Multiple Еогеасп в нокаут 2 массива уровня

Question

По существу я следующий 2 одномерный массив:

"items": 
[ 
    ["",""], 
    ["",""], 
    ["",""] 
] 

Я хочу перебрать эту коллекцию с помощью нокаута, и я получил следующее:

 <!-- ko foreach: items --> 
     <tr> 
      <td> 
       <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button> 
      </td> 
      <!-- ko foreach: $data --> 
      <td> 
       <input type="text" class="form-control" data-bind="value: $data" /> 
      </td> 
      <!-- /ko --> 
     </tr> 
      <!-- /ko --> 

Однако, это, похоже, не работает. Есть идеи?

Заранее спасибо

G

Answer 1

Виртуальный привязки - это просто комментарии и иногда могут перемещаться браузером, поскольку он пытается исправить разметку HTML. В этом случае браузер окружает ваш тег <tr> тегом <tbody>, как того требует спецификация HTML. <tbody> начинается прямо перед тегом <tr> и заканчивается прямо перед закрытием тега </table>. Таким образом, запирающий элемент комментарий виртуального теперь в неправильном месте:

<table> 
    <!-- ko foreach: items --> 
    <tbody> 
     <tr> 
      ... 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Ключ к фиксации этого добавить <tbody> тег в разметке:

<table> 
    <tbody> 
     <!-- ko foreach: items --> 
     <tr> 
      ... 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Ссылка: http://www.whatwg.org/specs/web-apps/current-work/multipage/tree-construction.html#parsing-main-intable

Answer 2

Вы столкнетесь с краевым случае, когда Нокаут не в состоянии найти вторую <!-- /ko --> тег, когда он внутри <table>.

Следующая разметка вызывает ошибку (в Chrome это говорит Uncaught Error: Cannot find closing comment tag to match: ko foreach: items):

<table> 
<!-- ko foreach: items --> 
     <tr> 
      <td> 
       <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button> 
      </td> 
      <!-- ko foreach: $data --> 
      <td> 
       <input type="text" class="form-control" data-bind="value: $data" /> 
      </td> 
      <!-- /ko --> 
     </tr> 
<!-- /ko --> 
</table> 

Fiddle: http://jsfiddle.net/63rkQ/

Но если изменить внешний Еогеасп быть на <table> тег, он работает:

<table data-bind="foreach: items"> 
     <tr> 
      <td> 
       <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button> 
      </td> 
      <!-- ko foreach: $data --> 
      <td> 
       <input type="text" class="form-control" data-bind="value: $data" /> 
      </td> 
      <!-- /ko --> 
     </tr> 
</table> 

Fiddle: http://jsfiddle.net/63rkQ/1/

Старайтесь не использовать виртуальные элементы для ваших привязок, если вам не обязательно. Я столкнулся с странными случаями, когда они работают над некоторыми браузерами, но не с другими. Их трудно отлаживать.

Вы можете видеть, что перемещение виртуального элемента за пределами <table> также работает (по крайней мере, в Chrome), но я не думаю, что это то, что вы хотите) ...

Fiddle: http://jsfiddle.net/63rkQ/2/