ノックアウト - html要素内の他の要素をオーバーライドするデータバインド

Question

ツイートのようなリストアイテムでデモアプリケーションを作成しようとしていて、問題が発生しました。私はテキストをバインドしたいh4要素を持っていて、内部にいくつかのスパン要素を持っていますが、バインドされたテキストだけが表示され、h4要素内の他の要素はオーバーライドされます。 これは私がしたい問題の一部です：

これは私がノックアウトでそれを実装しようとしている方法を得るものです：

sholeアイテム必要があります次のようになります。

私は、見出しのこの種を実装しようとしているテンプレートの特定の部分：私のアプリケーションで

<h4 class="media-heading" data-bind="text: name"><a><span>@</span><span data-bind="text: name"></span></a><span class="timeAgo"> 4 minutes ago</span></h4> 

フィドル： fiddle

私は私の質問があるテンプレートで、それは間違ってやっているので - どのように私はノックアウトを使用してアカウント名と時間前の部分で見出しを実装するだろうか？

Answer 1

textバインディングは、すべての要素の内容を置き換えます。これは、 "ネスティング"テキストバインディングには意味がないことを意味します。 （またはテキストバインドされた要素内の他のバインディング）。あなたの特定の問題を解決するために

、あなたの<h4>内の別の<span>を追加するか：あなたはドンが」

<h4> 
    <span data-bind="text: name"></span> 
    <a data-bind="text: '@' + name()"></span> 
    <span>4 minutes ago</span> 
</h4> 

または、：個人的に

<h4> 
    <span data-bind="text: name"></span> 
    <a> 
    <span>@</span> 
    <span data-bind="text: name"></span> 
    </a> 
    <span class="timeAgo">4 minutes ago</span> 
</h4> 

を、私はこれをクリーンアップしたいです余分な<span>が必要な場合は、virtual bindingを使用できます。

<!--ko text: name--><!--/ko-->