这看起来像是一个重复的问题,但是其他的答案都没有帮助我。我有下面的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>
当我尝试使用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错误吗?
8条答案
按热度按时间rryofs0p1#
除了
table
标记之外,我也遇到过同样的问题。不起作用-产生与Mauricio所述相同的问题
作品:
brvekthn2#
简短回答:
HTML不允许block元素在P元素内。所以P元素在UL元素前关闭。ko注解开始标记在P元素内结束,结束标记在P元素外结束。敲除要求开始和结束注解标记在同一个元素内。
原始答案:
多亏了@Sash,我才明白了为什么
<tbody>
标记是必需的。我也遇到了同样的问题,这段html:
显然,它不工作的原因是相同的。当我添加
</th>
直到它工作时,为什么它不工作让我震惊。我需要在开始ko comment* 之前添加结束标记 *。当我看到这一点时,我想起了SGML 101。**可选标记在comment之后。**所以实际的DOM树在我的代码中看起来是这样的:你可以注意到开始和结束标签在节点树的两个分支上。为了让评论在正确的位置,可选标签需要明确地放置。@michael最好解释一下为什么这会影响到原帖。
kninwzqo3#
我遇到了**自关闭div标记 * a导致的 * 相同错误 *,即
改为
现在一切又好了
hof1towb4#
我知道这是一个老线索,但以防万一有人发现这个。我的要简单得多
我在开头的评论中在ko后面加了一个冒号:
<!-- ko: foreach:stuff -->
而不是<!-- ko foreach:stuff -->
628mspwn5#
嗯...经过一段时间的努力,我幸运地找到了修复。这仍然不能解释为什么它不能解析那个特定的HTML模板(我也不同意它应该拒绝它),但是,通过用
<div>
替换包含整个模板的<p>
,这个问题就消失了。因此,我确信
<p>
和<div>
的DOM行为是不同的,并且显然会影响Knockout的模板解析逻辑。yftpprvb6#
这也可能是因为你的HTML格式不好a-例如,你有一些不匹配的开始或结束标签。
在我的例子中,我有一个额外的
<tr>
标记。删除它修复了这个问题。drnojrws7#
<div>
和<p>
标签不应该干扰<!-- ko -->
注解标签。我不明白为什么你这里的代码,带有注解ko标签结构,不能工作。这里有一个相同结构的jsfiddle sample(减去html的东西),它将根据值显示/隐藏适当的部分。如果你有所有匹配的
<!-- /ko -->
标签,你可能在你的html标签中有一个错误。如果切换<p>
到<div>
是可以接受的。今天到此为止,否则,我会删除你所有的html,只留下ko注解标签。如果没有问题,添加每个html元素一次一个,以跟踪违规的html。如果什么都没有出现......在jsfiddle中重新创建错误并更新您的问题。8zzbczxx8#
我也遇到过类似的问题,经过几个小时的标记匹配和UI构建失败,我认为我写了
代替
〈!--和ko之间的空间是这一切的根本原因。
希望它能帮到什么人!