Geek asks and answers

Mixing knockout with jQuery

I am creating a comment system with knockout.js and I am having some problems with the fact that templates work with our existing jQuery functions.

One example is the creation of comment dates. I wrote a jQuery function that forces data to go from 5-5-2012to 2 Days ago. For instance:

    <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 remains in the format 5-5-2012. There are several other custom jQuery functions that act on duplicate data that is now dynamically created by knockout (usually by class-based selection).

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

+3
2

DOM, afterRender/afterAdd/beforeRemove/beforeMove/afterMove, .

<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
    <li data-bind="text: $data"></li>
</ul>
<button data-bind="click: addItem">Add</button>


<script type="text/javascript">
    ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
        yellowFadeIn: function(element, index, data) {
            $(element).filter("li")
                      .animate({ backgroundColor: 'yellow' }, 200)
                      .animate({ backgroundColor: 'white' }, 800);
        },
        addItem: function() { this.myItems.push('New item'); }
    });
</script>

: http://knockoutjs.com/documentation/foreach-binding.html#note-7-post-processing-or-animating-the-generated-dom-elements

:

, DOM, (, ), ,

0

More articles:


All Articles