适当缩进KnockoutJS虚拟元素 [英] Properly indent KnockoutJS virtual elements

问题描述

我刚刚开始在Visual Studio MVC项目中的大型KnockoutJS代码库上工作.到目前为止，除虚拟元素外，所有内容似乎都非常简单.我了解需求，这很不错.但是，由于虚拟元素是注释，所以所有的缩进都被弄乱了，这使阅读变得很痛苦.

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.

是否可以将它们转换为实际的html元素，或者获取Visual Studio/Resharper使其正确缩进?

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

推荐答案

在大多数情况下，您可以使用实际的html元素代替虚拟容器，只是为了使您拥有更好的可读性和缩进(使用span或div).

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>

但是，对于select和li元素之类的东西，仍然需要这种无容器的控制流语法. 如@ZoltánTamási所说，在需要几个select和li嵌套层的情况下，我们可能必须忍受这个.

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.

这篇关于适当缩进KnockoutJS虚拟元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！