¿Cómo combinar widgets de jQuery-UI con plantillas de jQuery?

Question

Estoy usando jQueryUI y jQuery-tmpl, pero creo que el consejo que estoy buscando es lo suficientemente amplio como para aplicarlo a cualquier tipo de biblioteca de plantillas.

El problema que tengo es que a menudo voy a tener algún tipo de widget de ABM en mi plantilla

<script id="some-widget-template"> 
<div class="some-widget"> 
<input name="NameField"/> 
<button id="some-widget-save">Save</button> 
</div> 
</script> 

Eso me deja con un widget muy legible que puedo volver y editar, etc. Excepto que se es feo Usando jQueryUI puedo hacer que el botón sea muy bonito, pero requiere algo de Javascript. Así que en mi controlador Javascript correspondiente, el código se verá así:

$("#some-widget-template") 
     .render(arrayOfDataObjects) 
     .appendTo("body"); 
$("#some-widget-save").button(); 

Por esa ejemplo muy simple, esto funciona bien. Mi controlador, sin embargo, rápidamente se llenará de más elementos que necesitan transformarse. También parece que esta debería ser la preocupación del motor de visualización/plantillas, sin mencionar las cadenas mágicas ("# alguna-widget-guardar") que degradan la capacidad de mantenimiento del código.

¿Cuál es la mejor manera de hacerlo? Seguramente no puedo ser la primera persona en encontrarse con este problema. He pirateado jquery-tmpl para que antes de devolver un objeto jQuery, busque un elemento de botón y, si lo encuentra, lo transforme en un elemento de botón apropiado. Esto parece lento, ya que tendrá que atravesar cada elemento en la plantilla. ¿Algunas ideas?

Editar: Encontré que al usar CSS3, el 90% de mis problemas fueron eliminados. Al compilar para navegadores no compatibles con CSS3, uso el método de fábrica.

Answer 1

Descargo de responsabilidad: la primera vez que he oído hablar de jQuery-tmpl es al leer su pregunta.

En función de mi comprensión de su problema, trataría de estructurar mi instanciación de widgets de manera que los cambios se establezcan de manera automática y amplia para todos los elementos en cualquier página dada que coincidan con ciertos parámetros.

Puede incluir una función de inicialización de IU en su marco que, cuando se invoca, examina todos los elementos del DOM que usted le indica y los convierte en widgets de jQuery UI. El flujo sería algo así como ...

1. jQuery-tmpl realiza y convierte todos sus datos en la salida de plantilla adecuada.
2. Después de que jQuery-tmpl haya seguido su curso, se realiza una llamada a su método de creación de instancias, digamos "renderUI()".

jQuery-tmpl sería escupir a cabo una serie de elementos estructurados en base a sus datos ...

<div class="some-widget"> 
    <input name="NameField"/> 
    <button class="reset-button">reset</button> 
    <button class="save-button">Save</button> 
</div> 

<div class="tabbed-widget"> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 
</div> 

El método de instancias podría ser algo como ...

function renderUI() { 

    $('.some-widget > .save-button').button({/* options */}); 
    $('.tabbed-widget > ul').tabs({/* options */}); 
    /* ... continue any other types of widget instantiation ... */ 
} 

Si están creando instancias de los elementos de la IU seleccionados por clase, en lugar de ID, puedes poner tantos de ellos como quieras en el documento, y todos serán instanciados "a la vez", ya que jQuery los seleccionará a todos y aplicará el widget UI constructor para ellos.

Si necesita ejecutar algún código de preprocesamiento (como jQuery-tmpl) antes de que esos widgets sean instanciados, puede encapsular su inicialización de widgets y llamarlo una vez que todo el procesamiento de jQuery-tmpl esté fuera del camino.

De todos modos, espero que esto ayude!

P.S. Quizás esto es algo relacionado con jQuery-tmpl (aunque no puedo entender qué), pero parece que tu widget está compuesto de elementos DOM dentro de una etiqueta de script. Algo sobre eso me parece extremadamente irregular; P