title: Programmatically apply Knockout bindings to specific tags within a text block
body: <p>I have a block of html markup that I'd like to databind to a div using <a href="http://knockoutjs.com/" rel="nofollow">Knockout JS</a>. This is simple enough with the knockout <code>html</code> binding.</p>
  
  <p>What I'd like to do is conditionally bind child elements within that html markup, based on their class. These elements can appear anywhere within the html markup, as they are inline elements (like <code>span</code>, <code>a</code> tags, etc).</p>
  
  <p>The purpose of this is to databind click events to specific words or phrases within this text block, so that I can call a function (in this case, a modal with a definition of the target word or phrase).</p>
  
  <p>Does anyone know how to do this? From what I can see, I have two main avenues to explore:</p>
  
  <ol>
  <li><p>Use jQuery to grab the elements by class, and somehow databind to then after the fact. I don't know if this will work for various
  reasons - not having the DOM ready, not being able to databind in
  that method, etc.</p></li>
  <li><p>Use knockout's <a href="http://knockoutjs.com/documentation/template-binding.html" rel="nofollow">template binding</a>, and add an <code>afterRender</code> template callback that parses the text block for the elements and databinds
  them accordingly.</p></li>
  <li><p>A combination of the two above. (Yeah, I know, that's three avenues.)</p></li>
  </ol>
  
  <p>Has anyone done anything like this before? I'd like to get your advice and feedback, if possible. Thank you!</p>