javascript - 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的十六进制。