正しくインデントされたKnockoutJS仮想要素

Question

Visual Studio MVCプロジェクトの大きなKnockoutJSコードベースで作業を開始しました。これまでのすべては、仮想要素を除いてかなり単純なようです。私はその必要性を理解しており、それはかなり上品です。しかし、仮想要素がコメントであるため、インデントがすべて乱され、読むのが苦痛になります。

これを実際の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

ほとんどの時間、あなたは（spanまたはdivを使用して）ちょうど読みやすくしてインデントを持っているあなたを可能にするために、代わりに仮想コンテナの実際のHTML要素を使用することができます。あなたの例から行く

、私はしかし、そのような無容器制御フロー構文の必要性はselectとli要素のようなもののために残っているこの

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

ような何かをしたいです。 @ZoltánTamásiのように、selectとliのいくつかのネストされたレイヤーが必要な場合は、おそらくこれで生き残る必要があります。