25

这似乎是一个重复的问题，但其他答案都没有帮助我。我有以下 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

我努力了：

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

有任何想法吗？我在看一个 Knockout.js 错误吗？

4

7 回答 7

62

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>
于 2014-03-05T06:27:29.340 回答
8

简短的回答：

HTML 不允许 P 元素内的块元素。所以 P 元素在 UL 元素之前关闭。ko 注释打开标签在 P 元素中结束，结束标签在外面。Knockout 要求打开和关闭注释标记都在同一个元素中。

原答案：

感谢@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
   ┊

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

于 2014-05-27T09:35:32.940 回答
6

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

<div />

变成

<div></div>

现在一切都好起来了

于 2016-03-05T14:20:13.720 回答
4

我知道这是一个旧线程，但以防万一有人发现它。我的要简单得多

我在开场评论中的 ko 后面有一个冒号：

<!-- ko: foreach:stuff -->代替<!-- ko foreach:stuff -->

于 2019-03-27T15:24:36.190 回答
2

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

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

于 2013-09-10T20:09:14.563 回答
2

如果您的 HTML 通常格式不正确，也可能会导致这种情况 - 例如，如果您有不匹配的杂散打开或关闭标签。

就我而言，我有一个额外的<tr>标签。删除它解决了这个问题。

于 2016-06-02T18:18:51.630 回答
1

<div>and<p>标签不应干扰<!-- ko -->评论标签。我不明白为什么您在此处使用注释 ko 标记结构的代码不起作用。这是一个相同结构的jsfiddle 示例（减去 html 内容），它将根据值显示/隐藏相应的部分。

如果您有所有匹配的<!-- /ko -->标签，则您的 html 标签中可能有错误。如果切换<p>到<div>是可以接受的。收工，否则，我会删除你所有的 html 并只留下 ko 评论标签。如果没有问题，一次将每个 html 元素添加回去以追踪有问题的 html。如果没有出现任何结果...，请在 jsfiddle 中重新创建错误并更新您的问题。

于 2013-09-10T20:49:13.520 回答