1

私がこれを持っている場合、配列をテーブルにバインドしようとしています：

<table data-bind="foreach: Applicants, visible: Applicants().length > 0">
        <tr>
        <td>
        <p data-bind="text:FirstName() + ' ' + LastName()" />
        <img data-bind="attr:{src: URL}" width="100px" height="100px" alt="test" /></td>
        </tr>
</table>

imgタグは生成されず、表示から省略されます。

それを表示するには、別の<td>ラップが必要です。<img>なんで？

わかりました、@ Stokedoutは正しいです、</p>閉じたタグを使用する代わりに試してみた後<p .... />、それは機能します。したがって、タグに値がある可能性があるが、値なしで閉じられている場合、残りのタグではノックアウトは機能しません。

例：

動作します：-名と姓の両方が表示されます。

      <p data-bind="text: FirstName"></p>
      <p data-bind="text: LastName"></p>

動作しません：-名のみが表示されます

      <p data-bind="text: FirstName"/>
      <p data-bind="text: LastName"/>

理由がわかりません！

4

2 に答える 2

3

あなたが書くとき：

<p data-bind="text:FirstName() + ' ' + LastName()" />
<img data-bind="attr:{src: URL}" width="100px" height="100px" alt="test" />

終了タグがない場合、imgは段落のコンテンツとして扱われます。セルフクローズPエレメントの場合、ブラウザーは、次の段落の開始までに段落が終了したと推測できます。

これを使用してバインドする場合：

data-bind="text:FirstName() + ' ' + LastName()"

KOはP要素にテキストを設定しようとし、前のコンテンツをクリアします。

解決策は非常に簡単です。終了タグを追加するだけです。

<p data-bind="text:FirstName() + ' ' + LastName()"></p>
<img data-bind="attr:{src: URL}" width="100px" height="100px" alt="test" />
于 2013-01-11T03:50:30.097 に答える
2

これは、<p>要素が完全な要素構文を持っている必要があるためです。

<p data-bind="text:FirstName() + ' ' + LastName()"></p>

これがないと、HTMLは次のようになります。

<p data-bind="text:...">
    <img ... />
</p>

したがって、imgは要素のコンテンツになり、バインディングpによって上書きされます。text

于 2013-01-11T01:52:46.243 に答える