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ánTamási就这么说了，我们可能不得不忍受这个。

正确缩进KnockoutJS虚拟元素

1 个答案: