Complementos RactiveJS y jQuery

ractive list

Question

Tengo un formulario con múltiples campos, algunos de ellos para texto sin formato y algunos de ellos requieren complementos para capacidades avanzadas de selección y carga.

Hay 2 problemas con esto:

• ractive necesita analizar la plantilla y renderizarla antes de que pueda adjuntar los complementos, por lo que hay un pequeño retraso
• el segundo es que dichos complementos cambian el marcado en torno a los campos mencionados y que no pueden funcionar con el árbol DOM generado de ractive porque ese marcado no está sincronizado.

¿Cuál es el enfoque correcto para resolver este problema? Realmente me gustaría usar ractive para enlazar todos los valores de forma y controlar el comportamiento de todo, pero en este punto parece casi imposible.

Answer 1

Una buena forma de integrar los complementos de jQuery con Ractive es usar decoradores . Un decorador es una función que se llama cuando un elemento ingresa al DOM; devuelve un objeto con un método de teardown() que se llama cuando se elimina del DOM.

Entonces, si estuviera utilizando el plugin jQuery File Upload , su decorador podría verse así:

var fileupload = function (node) {
  $(node).fileupload();

  return {
    teardown: function () {
      $(node).fileupload(''destroy'');
    }
  };
};

Una vez que haya creado el decorador, debe registrarlo . La forma más fácil es hacerlo disponible globalmente ...

Ractive.decorators.fileupload = fileupload;

... pero también puede pasar por decoradores por instancia o por componente:

// instance will have the fileupload decorator
ractive = new Ractive({
  // ...usual options...
  decorators: { fileupload: fileupload }
});

// all instances of Widget will have the decorator
Widget = Ractive.extend({
  decorators: { fileupload: fileupload }
});

Entonces, puedes usarlo en tu plantilla así:

<input decorator="fileupload" type="file" data-url="whatever">

Ocurre que con este complemento puede especificar opciones con atributos de data- . Pero si necesita especificar opciones a través del decorador, puede hacerlo:

<input decorator="fileupload:{{url}},{multiple:true}" type="file">

En este ejemplo, la función de decorador recibiría dos argumentos adicionales: una URL y un objeto de opciones:

Ractive.decorators.fileupload = function (node, url, options) {
  // setup code...

  return {
    update: function (url, options) {
      // if the options change (i.e. `url` updates),
      // this function is called
    },
    teardown: function () {
      // teardown code...
    }
  };
};