Knockout - data-bind overriging other elements inside an html element

Question

I am trying to make a demo app with tweet-like list items and I have run into a problem. I have a h4 element to which I want to bind text and also have some span elements inside of it, but only the bound text is shown and the other elements inside the h4 element are overrided. This is the problematic part I want to make:

problematic place

This is what I get the way I'm trying to implement it with knockout:

knockout problem

The shole item should look like this:

tweet item

The specific part of template where I'm trying to implement this kind of heading:

 <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 with my application: fiddle

Since I'm doing it wrong in the template my question is - how would I implement the heading with account name and time ago part by using knockout?

user3297291 user3297291 · Accepted Answer · 2017-06-05T10:51:44

The text binding replaces all of the element's contents. This means there's no point in "nesting" text bindings. (Or any other bindings inside a text-bound element).

To solve your specific issue, you can either add another <span> inside your <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>

Personally, I'd clean this up to:

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

Or, if you don't want the extra <span>, you can use a virtual binding:

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

Knockout - data-bind overriging other elements inside an html element

1 Answers