Knockout.js模板呈现奇怪的换行符

Question

我有一些嵌套的淘汰模板生成菜单

模板可能如下所示

<script id="menu-template" type="text/html">
    <ul data-bind="template: { name: 'topmenu-template', foreach: $data }" class="nav navbar-nav"></ul>
</script>

<script id="topmenu-template" type="text/html">
    <!-- ko ifnot: Children.length > 0-->
    <li>
        <a data-bind="text: Name + ' x', attr: { href: Url, title: Name }"></a>
    </li>
    <!-- /ko -->​
    <!-- ko if: Children.length > 0-->
    <li data-bind="template: { name: 'child-template', foreach: $data }" class="dropdown"></li>
    <!-- /ko -->​
</script>

这会呈现像这样的东西

如果我添加类似<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />的内容类型，它将会是这样的

还有很多空白，造型中没有。我发现的是每个​元素之间都有<li>。例如

有关如何处理此事的任何建议吗？

由于

==更新==

其余模板

<script id="child-template" type="text/html">
    <!--ko if: Level <= 1-->
    <a class="dropdown-toggle" data-bind="html: Name + ' ' + Level + 'y<b class=\'caret\'></b>', attr: { href: Url, title: Name }" data-toggle="dropdown"></a>
    <ul data-bind="template: { name: 'childmenu-template', foreach: Children }" class="dropdown-menu"></ul>
    <!--/ko-->​
    <!--ko if: Level > 1-->
    <a class="dropdown-toggle" data-bind="html: Name + ' ' + Level + 'z<b class=\'caret\'></b>', attr: { href: Url, title: Name }" data-toggle="dropdown"></a>
    <ul data-bind="template: { name: 'childmenu-template', foreach: Children }" class="" style="white-space: nowrap"></ul>
    <!--/ko-->​
</script>

<script id="childmenu-template" type="text/html">
    <!--ko ifnot: Children.length > 0-->
    <li>
        <a data-bind="text: Level + ' ' + Name, attr: { href: Url, title: Name }"></a>
    </li>
    <!--/ko-->​
    <!--ko if: Children.length > 0-->
    <li data-bind="template: { name: 'child-template', foreach: $data }" class=""></li>
    <!--/ko-->​
</script>

Answer 1

源中有零宽度空格字符。所以你只需要删除它们。它们出现在每个结束虚拟元素注释的末尾。以下是您在十六进制编辑器中的Unicode代码：

0000000330: 002F 006B 006F 0020 │ 002D 002D 003E 200B  /ko -->​

注意最后的200B，8203为十六进制。