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 best解释为什么这会影响原始海报。

Answer 3

嗯......经过一段时间的挣扎，我幸运地找到了修复。这仍然无法解释为什么它无法解析特定的HTML模板（我也不同意它应该拒绝它），但是，通过用<p>替换整个事物的<div>，问题消失了。

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

Answer 4

自我关闭div标签引起了相同的错误。

<div />

更改为

<div></div>

现在一切都好了

Answer 5

<div>和<p>代码不应干扰评论代码。我不明白为什么你在这里使用注释ko标签结构的代码不起作用。这是一个相同结构的jsfiddle sample（减去html的东西），它将根据值显示/隐藏相应的部分。

如果您拥有所有匹配的代码，则html代码可能会出错。如果将<p>切换为<div>是可以接受的。称它为一天，否则，我将删除所有的html并留下ko注释标签。如果没有问题，请逐个添加每个html元素以追踪有问题的html。如果没有任何结果......，请在jsfiddle中重新创建错误并更新您的问题。

Answer 6

如果您的HTML通常形成不当，也可能会导致这种情况 - 例如，如果您有没有匹配的杂散打开或关闭标记。

在我的情况下，我有一个额外的<tr>标签。删除它修复了问题。

Answer 7

我知道这是一个旧线程，但是以防万一有人发现了这个。我的方法更简单

在开头的评论中，我在冒号之后有一个冒号：

而不是

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

7 个答案:

简答：

原始答案：