Mixing Knockout with jQuery

Question

I'm creating a commenting system with knockout.js and I'm having some issues with getting the templating working with our existing jQuery functions.

One example is with the dates comments are created. I wrote a jQuery function that causes the data to turn from 5-5-2012 to 2 Days ago. For example:

    <ul data-bind="foreach: Comments">
        <li data-bind="attr: { id: Id }" class="Comment">
           <div data-bind="text: DateCreated" class="prettyDate"></div>
           ...
        </li>
    </ul>


    <script type="text/javascript">
          $(function(){
              $(".prettyDate").prettify();
          });
    </script>

With this code, when I add a new comment dynamically, the date stays in the 5-5-2012 format. There are several other custom jQuery functions that act on repeating data that is now dynamically created by knockout (usually by selecting based on classes).

How can I apply these custom jQuery functions on dynamic data generated by knockout.js?

Answer 1

One option might be to use a custom binding handler which sends bound elements through your jQuery plugin, e.g.:

http://jsfiddle.net/mikebridge/Q9r86/4/

Another possibility might be to add a computed observable in your view model.