正确缩进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）。

\n\n

从你的例子来看，我会做这样的事情

\n\n

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

\n\n

select然而，像和元素这样的东西仍然需要这种无容器控制流语法li。\n在需要多层嵌套的select和 的情况下li，如 @Zolt\xc3\xa1n Tam\xc3\xa1si 所说，我们可能会拥有忍受这个。

\n