Properly indent KnockoutJS virtual elements

Question

I just started work on a large KnockoutJS code base in a Visual Studio MVC project. Everything so far seems fairly straightforward except the virtual elements. I understand the need and it is fairly nifty. However because the virtual elements are comments then indentation is all messed up which makes it a terrible pain to read.

Is it possible to convert these to an actual html element or to get Visual Studio/Resharper to indent them correctly?

For instance I have some code like the following which is all at the same indentation level.

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

Most of the time, you can use an actual html element instead of the virtual container just to enable you to have better readability and indentation (using span or div).

Going from your example, I'd do something like this

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

However, the need for such containerless control flow syntax remains for stuff like select and li elements. In the cases where you need several nested layers of select and li as @Zoltán Tamási put it, we'll probably have to live with this.