javascript 敲 debugging 误:找不到匹配的结束注解标记

kfgdxczn  于 2023-01-16  发布在  Java
关注(0)|答案(8)|浏览(245)

这看起来像是一个重复的问题,但是其他的答案都没有帮助我。我有下面的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错误吗?

rryofs0p

rryofs0p1#

除了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>
brvekthn

brvekthn2#

简短回答:

HTML不允许block元素在P元素内。所以P元素在UL元素前关闭。ko注解开始标记在P元素内结束,结束标记在P元素外结束。敲除要求开始和结束注解标记在同一个元素内。

原始答案:

多亏了@Sash,我才明白了为什么<tbody>标记是必需的。
我也遇到了同样的问题,这段html:

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

显然,它不工作的原因是相同的。当我添加</th>直到它工作时,为什么它不工作让我震惊。我需要在开始ko comment* 之前添加结束标记 *。当我看到这一点时,我想起了SGML 101。**可选标记在comment之后。**所以实际的DOM树在我的代码中看起来是这样的:

─┬─Table
 ├─┬─THead
 │ ├─┬─Th
 │ | ├─#Data(ID)
 │ | └─#Comment(ko if:)
 │ └─┬─Th
 │   ├─#Data(Name)
 │   └─#Comment(/ko)
 └─┬─TBody
   ┊

你可以注意到开始和结束标签在节点树的两个分支上。为了让评论在正确的位置,可选标签需要明确地放置。@michael最好解释一下为什么这会影响到原帖。

kninwzqo

kninwzqo3#

我遇到了**自关闭div标记 * a导致的 * 相同错误 *,即

<div />

改为

<div></div>

现在一切又好了

hof1towb

hof1towb4#

我知道这是一个老线索,但以防万一有人发现这个。我的要简单得多
我在开头的评论中在ko后面加了一个冒号:
<!-- ko: foreach:stuff -->而不是<!-- ko foreach:stuff -->

628mspwn

628mspwn5#

嗯...经过一段时间的努力,我幸运地找到了修复。这仍然不能解释为什么它不能解析那个特定的HTML模板(我也不同意它应该拒绝它),但是,通过用<div>替换包含整个模板的<p>,这个问题就消失了。
因此,我确信<p><div>的DOM行为是不同的,并且显然会影响Knockout的模板解析逻辑。

yftpprvb

yftpprvb6#

这也可能是因为你的HTML格式不好a-例如,你有一些不匹配的开始或结束标签。
在我的例子中,我有一个额外的<tr>标记。删除它修复了这个问题。

drnojrws

drnojrws7#

<div><p>标签不应该干扰<!-- ko -->注解标签。我不明白为什么你这里的代码,带有注解ko标签结构,不能工作。这里有一个相同结构的jsfiddle sample(减去html的东西),它将根据值显示/隐藏适当的部分。
如果你有所有匹配的<!-- /ko -->标签,你可能在你的html标签中有一个错误。如果切换<p><div>是可以接受的。今天到此为止,否则,我会删除你所有的html,只留下ko注解标签。如果没有问题,添加每个html元素一次一个,以跟踪违规的html。如果什么都没有出现......在jsfiddle中重新创建错误并更新您的问题。

8zzbczxx

8zzbczxx8#

我也遇到过类似的问题,经过几个小时的标记匹配和UI构建失败,我认为我写了

<!--ko if: someConditionCheck() -->

代替

<!-- ko if: someConditionCheck() -->

〈!--和ko之间的空间是这一切的根本原因。
希望它能帮到什么人!

相关问题