visual-studio - 正确缩进 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

大多数时候，你可以 使用实际的 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>

然而，对于像 select 这样的东西，仍然需要这种无容器控制流语法。和 li元素。
在需要多个嵌套层的情况下 select和 li正如@Zoltán Tamási 所说，我们可能不得不忍受这个。