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

私が試してみました：

  • Knockout を 2.2.1 から 2.3.0 にアップグレードします。使い物にならない
  • HTML/XML 構造の検証。それは良いです！
  • を削除する<ul id="other-location-matches"...>と問題が解決するようです...しかし、私はそれが必要です<ul>!!

何か案は？Knockout.js のバグを見ているのでしょうか?

4

7 に答える 7

8

簡潔な答え：

HTML では、P 要素内に block 要素を使用できません。したがって、P 要素は UL 要素の直前で閉じられます。ko コメントの開始タグは P 要素で終了し、終了タグは外側にあります。ノックアウトでは、開始コメント タグと終了コメント タグの両方が同じ要素内にある必要があります。

元の答え:

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

開始タグと終了タグがノード ツリーの 2 つのブランチにあることがわかります。コメントを正しい位置に配置するには、オプションのタグを明示的に配置する必要があります。@michaelは、これが元のポスターに影響を与える理由を最もよく説明しています。

于 2014-05-27T09:35:32.940 に答える
4

これが古いスレッドであることは知っていますが、誰かがこれを見つけた場合に備えて。私のはもっとシンプルでした

最初のコメントの ko の後にコロンがありました。

<!-- ko: foreach:stuff -->それ以外の<!-- ko foreach:stuff -->

于 2019-03-27T15:24:36.190 に答える
2

うーん...しばらく苦労した後、幸運にも修正を見つけました。これは、その特定の HTML テンプレートの解析に失敗する理由をまだ説明していません (また、それを拒否する必要があることに同意します<p>) <div>。

<p>したがって、との DOM の動作<div>は異なり、明らかに Knockout のテンプレート解析ロジックに影響を与えると確信しています。

于 2013-09-10T20:09:14.563 に答える
2

これは、一般的に HTML の形式が適切でない場合にも発生する可能性があります。たとえば、一致しない開始タグまたは終了タグが適切でない場合などです。

私の場合、余分な<tr>タグがありました。削除すると問題が解決しました。

于 2016-06-02T18:18:51.630 に答える
1

<div>およびタグがコメント タグに干渉しては<p>なりません。<!-- ko -->コメント ko タグ構造を使用した、ここにあるコードが機能しない理由がわかりません。これは、値に基づいて適切なセクションを表示/非表示にする同じ構造 (html のものを除く) のjsfiddleサンプルです。

一致するタグがすべてある場合<!-- /ko -->は、html タグにエラーがある可能性があります。に切り替える場合は許容<p>されます。<div>そうでなければ、あなたの html をすべて削除し、ko コメント タグだけを残します。問題がなければ、各 html 要素を一度に 1 つずつ追加して、問題のある html を突き止めます。それでも何も起こらない場合は...、jsfiddleでエラーを再現し、質問を更新してください。

于 2013-09-10T20:49:13.520 に答える