Knockout Error:无法找到要匹配的结束注释标记

Question

这似乎是一个重复的问题,但其他答案都没有帮助我.我有以下HTML(这是一个Razor模板,但这里没有Razor细节).

<p class="search-results-summary">
    Results 
    <!-- ko if: SearchTerms.Query -->
    for <span data-bind="html: SearchTerms.Query"></span>
    <!-- /ko -->
    <!-- ko if: SearchTerms.Names -->
    for Names <span data-bind="html: SearchTerms.Names.join(', ')"></span>
    <!-- /ko -->
    <!-- ko if: SearchTerms.Location && AlternativeLocations && AlternativeLocations.length -->
        within <span data-bind="text: SearchTerms.LocationRadio"></span>
        miles of <span data-bind="html: SearchTerms.Location"></span>. 
        <!-- ko if: AlternativeLocations && AlternativeLocations.length > 1 -->
            <a class="more alternative-locations" href="#">more</a>
            <ul id="other-location-matches" data-bind="foreach: AlternativeLocations.slice(1).sort()" style="display: none">
                <li>&gt; Did you mean <a data-bind="html: $data, attr: { href: Edge.API.CurrentSearchResponse.SearchTerms.mutate({ Location: $data }).getUrl() }"></a>?</li>
            </ul>
        <!-- /ko -->
    <!-- /ko -->
    <!-- ko if: SearchTerms.Location && (!AlternativeLocations || AlternativeLocations.length == 0) -->
    <span class="error">We couldn't find '<span data-bind="html: SearchTerms.Location"></span>' on the map. Your search ran Worldwide.
    </span>
    <!-- /ko -->
</p>

当我尝试使用Knockout绑定此模板时,我收到此错误:

Error: Cannot find closing comment tag to match: ko if: SearchTerms.Location && AlternativeLocations && AlternativeLocations.length 

我试过了:

• 将Knockout从2.2.1升级到2.3.0.没用
• 验证HTML/XML结构.很好!
• 删除<ul id="other-location-matches"...>似乎摆脱了问题...但我需要<ul>!

有任何想法吗？我在看一个Knockout.js漏洞吗？

Answer 1

除了table标签,我遇到了同样的问题.

不起作用 - 产生与Mauricio所指出的相同的问题

<table>
<!-- ko: foreach: { data: SomeData, as: 'item' } -->
   <tr>
      <td data-bind="text: item"></td>
   </tr>
<!-- /ko -->
</table>

作品:

<table>
   <tbody>
   <!-- ko: foreach: { data: SomeData, as: 'item' } -->
      <tr>
         <td data-bind="text: item"></td>
      </tr>
   <!-- /ko -->
   </tbody>
</table>

Answer 2

简短回答:

HTML不允许P元素内的块元素.因此P元素在UL元素之前关闭.ko注释打开标记在P元素中结束,结束标记在外面.Knockout要求open和closing注释标记位于同一元素中.

原始答案:

感谢@Sash,我已经理解为什么<tbody>标签是强制性的.

我对这段HTML有同样的问题:

<table>
    <thead>
        <th>ID
        <!-- ko if: showName() --> <th>Name <!-- /ko -->
    <tbody data-bind="foreach: data">
...

显然,它出于同样的原因不起作用.当我添加</th>它直到它工作时,为什么它不起作用.我需要在开头ko评论之前添加结束标记.我很快就看到了,我回忆起SGML 101. 可选标签在评论之后.所以实际的DOM树看起来像我的代码:

???Table
 ????THead
 ? ????Th
 ? | ??#Data(ID)
 ? | ??#Comment(ko if:)
 ? ????Th
 ?   ??#Data(Name)
 ?   ??#Comment(/ko)
 ????TBody
   ?

您可以注意到开始和结束标记位于节点树的两个分支上.要在正确的位置获得评论,需要明确放置optionnal标记.@michael最好解释为什么这会影响原始海报.

Answer 3

我遇到了由自关闭 div 标签引起的相同错误，即

<div /> 

变成

<div></div>

现在一切都好了

Answer 4

好吧……经过一段时间的挣扎，我幸运地找到了解决办法。这仍然不能解释为什么它无法解析该特定的 HTML 模板（我也不同意它应该拒绝它），但是，通过用 a 替换<p>包含整个内容的内容<div>，问题就消失了。

所以我确信 和 的 DOM 行为<p>是<div>不同的，并且显然会影响 Knockout 的模板解析逻辑。