Include span element inside Knockout data bound text

Question

I have a bootstrap dropdown on my page that is filled dynamically without knockout data. The standard bootstrap dropdown is like this:

<div class="dropdown">
     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
         Dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">

     </ul>
</div>

Notice the "Title" of the dropdown is going to be "Dropdown" and the span with class "carat" is going to add the downward facing carat icon to make it look like a dropdown menu.

The problem is when I add a data-bind to change the text of the title of the select menu like this (some classes omitted for simplicity):

<div>
     <button data-bind = "text: MenuTitle"> 
         Dropdown <span class="caret"></span>
     </button>
     <ul >

     </ul>
</div>

MenuTitle is just a simple ko.observable with text.

It overrides the span with the carat. How can data-bind the text of the button and still append the span class carat inside it?

James Thorpe James Thorpe · Accepted Answer · 2015-09-21T15:06:10

Move the binding to a new span created for just that text:

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
    <span data-bind="text: MenuTitle"></span><span class="caret"></span>
</button>

Include span element inside Knockout data bound text

1 Answers