Mezcla de Knockout con jQuery

jquery-templates knockout.js

Question

Estoy creando un sistema de comentarios con knockout.js y tengo algunos problemas para que la plantilla funcione con nuestras funciones existentes de jQuery.

Un ejemplo es con las fechas en que se crean los comentarios. Escribí una función jQuery que causa que los datos 5-5-2012 del 5-5-2012 al 2 Days ago de 5-5-2012 de hace 2 Days ago . Por ejemplo:

    <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>

Con este código, cuando agrego un nuevo comentario dinámicamente, la fecha se mantiene en el formato 5-5-2012 . Hay varias otras funciones de jQuery personalizadas que actúan sobre la repetición de datos que ahora se crea dinámicamente por nocaut (generalmente seleccionando según las clases).

¿Cómo puedo aplicar estas funciones jQuery personalizadas en datos dinámicos generados por knockout.js?

Answer 1

Una opción podría ser utilizar un controlador de enlace personalizado que envíe elementos enlazados a través de su complemento jQuery, por ejemplo:

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

Otra posibilidad podría ser agregar un observable calculado en su modelo de vista.

Answer 2

Si necesita ejecutar más lógica personalizada en los elementos DOM generados, puede usar cualquiera de las devoluciones de llamada afterRender / afterAdd / beforeRemove / beforeMove / afterMove que se describen a continuación.

<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>

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

Sin embargo, ten cuidado con la siguiente nota:

Si su objetivo es adjuntar otros comportamientos a los nuevos elementos DOM cuando se han agregado (por ejemplo, controladores de eventos o para activar controles de UI de terceros), entonces su trabajo será mucho más fácil si implementa ese nuevo comportamiento como personalizado. unión en su lugar