Правильно отступ KnockoutJS виртуальных элементов

Question

Я только начал работу над большой базой кода KnockoutJS в проекте Visual Studio MVC. Все до сих пор кажется довольно простым, за исключением виртуальных элементов. Я понимаю необходимость, и она довольно изящна. Однако из-за того, что виртуальные элементы являются комментариями, тогда отступы все испортились, из-за чего ужасная боль читается.

Можно ли преобразовать их в фактический элемент html или получить Visual Studio/Resharper, чтобы отложить их правильно?

Например, у меня есть код, похожий на следующий, который находится на одинаковом уровне отступа.

<!-- ko with: Home --> 
<!-- ko with: Model --> 
<!-- ko foreach: Items --> 
<!-- ko if: IsOpened --> 
<button class="btn btn-default btn-sm" data-bind="click: $parents[1].SelectItem, css: { 'btn-warning': IsActived }, disable: $root.ItemDetail().IsLoading"> 
    <i class="fa fa-calendar-check-o fa-lg" data-bind="css: { 'text-success': !IsActived() }"></i><span data-bind="text: Title"></span> 
</button> 
<!--/ko--> 
<!--/ko--> 
<!-- ko foreach: OtherItems --> 
<!-- ko if: IsOpened --> 

<button class="btn btn-default btn-sm" data-bind="click: $parents[1].SelectOtherItem, css: { 'btn-warning': IsActived }, disable: $root.OtherItemDetail().IsLoading"> 
    <i class="fa fa-desktop fa-lg" data-bind="css: { 'text-info': !IsActived() }"></i><span data-bind="text: Title"></span> 
</button> 
<!--/ko--> 
<!--/ko--> 
... 
<!--/ko--> 
<!--/ko--> 

Answer 1

Большую часть времени, вы можете использовать фактический HTML элемент вместо виртуального контейнера просто, чтобы вы могли иметь лучшую читаемость и отступов (с помощью span или div).

Переход из вашего примера, я хотел бы сделать что-то вроде этого

<span data-bind="with:Home"> 
    <span data-bind="with: Model"> 
     <span data-bind="foreach: Items"> 
      <span data-bind="if: IsOpened"> 
       <button class="btn btn-default btn-sm" data-bind="click: $parents[1].SelectItem, css: { 'btn-warning': IsActived }, disable: $root.ItemDetail().IsLoading"> 
        <i class="fa fa-calendar-check-o fa-lg" data-bind="css: { 'text-success': !IsActived() }"></i><span data-bind="text: Title"></span> 
       </button> 
      </span> 
     </span> 
     <span data-bind="foreach: OtherItems"> 
      <span data-bind="if: IsOpened"> 

       <button class="btn btn-default btn-sm" data-bind="click: $parents[1].SelectOtherItem, css: { 'btn-warning': IsActived }, disable: $root.OtherItemDetail().IsLoading"> 
        <i class="fa fa-desktop fa-lg" data-bind="css: { 'text-info': !IsActived() }"></i><span data-bind="text: Title"></span> 
       </button> 
      </span> 
     </span> 
     ... 
    </span> 
</span> 

Однако необходимость такого containerless синтаксиса потока управления остается вещи, как select и li элементов. В тех случаях, когда вам нужно несколько вложенных слоев select и li, как сказал @ Zoltán Tamási, нам, вероятно, придется жить с этим.