javascript 淘汰赛错误：找不到匹配的结束评论标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18727897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout Error: Cannot find closing comment tag to match
提问by Mauricio Morales
This may seem like a duplicate question, but none of the other answers have helped me. I have the following HTML (it's a Razor template, but no Razor specifics here).
这似乎是一个重复的问题，但其他答案都没有帮助我。我有以下 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>> 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>
When I try to bind this template using Knockout, I get this error:
当我尝试使用 Knockout 绑定此模板时，出现此错误：
Error: Cannot find closing comment tag to match: ko if: SearchTerms.Location && AlternativeLocations && AlternativeLocations.length
I have tried:
我努力了：
- Upgrading Knockout from 2.2.1 to 2.3.0. No use
- Verifying HTML/XML structure. It's good!
- Removing the
<ul id="other-location-matches"...>seems to get rid of the issue... but I need that<ul>!!
- 将淘汰赛从 2.2.1 升级到 2.3.0。没用
- 验证 HTML/XML 结构。很好！
- 删除
<ul id="other-location-matches"...>似乎摆脱了这个问题......但我需要那个<ul>！
Any ideas? Am I looking at a Knockout.js bug?
有任何想法吗？我在看一个 Knockout.js 错误吗？
回答by Sash
I have encountered the same issue except with tabletags.
除了table标签，我遇到了同样的问题。
Doesn't work - produces the same issue as indicated by Mauricio
不起作用 - 产生与 Mauricio 指出的相同的问题
<table>
<!-- ko: foreach: { data: SomeData, as: 'item' } -->
<tr>
<td data-bind="text: item"></td>
</tr>
<!-- /ko -->
</table>
Works:
作品：
<table>
<tbody>
<!-- ko: foreach: { data: SomeData, as: 'item' } -->
<tr>
<td data-bind="text: item"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
回答by gkr
Short answer:
简答：
HTML doesn't allow block element inside P element. So the P element is closed right before the UL element. The ko comment open tag end in the P element and the closing tag outside. Knockout require both open and closing comment tag to be in the same element.
HTML 不允许在 P 元素中使用块元素。所以 P 元素在 UL 元素之前是闭合的。ko 注释开始标记在 P 元素结束，结束标记在外面。Knockout 要求打开和关闭注释标签都在同一个元素中。
Original answer:
原答案：
thanks to @Sash, I've understood why the <tbody>tag is mandatory.
感谢@Sash，我明白了为什么<tbody>标签是强制性的。
I was having the same problem with this piece of html:
我对这段 html 有同样的问题：
<table>
<thead>
<th>ID
<!-- ko if: showName() --> <th>Name <!-- /ko -->
<tbody data-bind="foreach: data">
...
Obviously, it doesn't work for the same reason. Why it doesn't work striked me when I added </th>until it work. I needed to add the closing tag before the opening ko comment. As soon I have seen that, I recalled SGML 101.
Optional tag come after comment.So the actual DOM tree look like that for my code:
显然，出于同样的原因，它不起作用。当我添加</th>直到它起作用时，为什么它不起作用让我感到震惊。我需要在开头 ko 评论之前添加结束标记。一看到它，我就想起了 SGML 101。
可选标签在评论之后出现。所以实际的 DOM 树看起来像我的代码：
─┬─Table
├─┬─THead
│ ├─┬─Th
│ | ├─#Data(ID)
│ | └─#Comment(ko if:)
│ └─┬─Th
│ ├─#Data(Name)
│ └─#Comment(/ko)
└─┬─TBody
┊
You can notice the opening and closing tag are on two branch of the node tree. To get the comment at the right position, optionnal tag need to be explictely placed. @michael bestexplain why this affect the original poster.
您可以注意到开始和结束标记位于节点树的两个分支上。为了在正确的位置获得评论，需要明确放置可选标签。@michael 最好解释为什么这会影响原始海报。
回答by MemeDeveloper
I had the same errorcaused by a self closing div tagi.e.
我遇到了由自关闭 div 标签引起的相同错误，即
<div />
changed to
变成
<div></div>
now all is good again
现在一切都好了
回答by Mauricio Morales
Well... After a while of struggling I luckily found the fix. This still doesn't explain why it is failing to parse that particular HTML template (nor I would agree it should be rejecting it) but, by replacing the <p>enclosing the entire thing with a <div>, the issue goes away.
嗯...经过一段时间的挣扎，我幸运地找到了解决方法。这仍然不能解释为什么它无法解析那个特定的 HTML 模板（我也不同意它应该拒绝它）但是，通过用 a 替换<p>封闭整个东西<div>，问题就消失了。
So I'm sure that DOM behaviors for <p>and <div>are different, and apparently affect Knockout's template parsing logic.
所以我敢肯定，DOM行为的<p>和<div>是不同的，而且显然会影响淘汰赛的模板的分析逻辑。
回答by nwayve
The <div>and <p>tags shouldn't interfere with the <!-- ko -->comment tags. I can't see why the code you have here, with the comment ko tag structure, wouldn't work. Here's a jsfiddle sampleof the same structure (minus the html stuff) that will show/hide the appropriate sections based on the values.
在<div>和<p>标签不得与干扰<!-- ko -->注释标记。我不明白为什么你这里的代码，带有注释 ko 标签结构，不起作用。这是一个具有相同结构（减去 html 内容）的jsfiddle 示例，它将根据值显示/隐藏适当的部分。
If you have all the matching <!-- /ko -->tags, you may have an error in your html tags. If switching the <p>to <div>is acceptable. Call it a day, otherwise, I'd remove all of your html and leave just the ko comment tags. If there's no problem, add each html element back one at a time to track down the offending html. If that turns up nothing..., recreate the error in a jsfiddle and update your question.
如果您拥有所有匹配的<!-- /ko -->标签，则您的 html 标签可能会出错。如果切换<p>到<div>是可以接受的。收工吧，否则，我会删除您所有的 html，只留下 ko 评论标签。如果没有问题，将每个 html 元素一次添加一个，以追踪有问题的 html。如果没有任何结果......，请在 jsfiddle 中重新创建错误并更新您的问题。
回答by Andrew
This may also be caused if your HTML is poorly formed in general - for example if you have stray opening or closing tags that don't have a match.
如果您的 HTML 格式一般不正确，也可能会导致这种情况 - 例如，如果您有不匹配的开始或结束标记。
In my case I had an extra <tr>tag. Deleting it fixed the problem.
就我而言，我有一个额外的<tr>标签。删除它解决了问题。
回答by Dennis
I know this is an old thread but just in case someone finds this. Mine was way simpler
我知道这是一个旧线程，但以防万一有人发现这个。我的更简单
I had a colon after the ko in the opening comment:
我在开头评论中的 ko 后面有一个冒号：
<!-- ko: foreach:stuff -->instead of <!-- ko foreach:stuff -->
<!-- ko: foreach:stuff -->代替 <!-- ko foreach:stuff -->
