Uso de agility.js para el diseño y la composición de la página

Soy nuevo en las bibliotecas javascript de estilo MVC, así que disculpe si esta pregunta es demasiado básica. Intento escribir un Single-Page Application completamente en jQuery y agility.js. Los ejemplos que se proporcionan en agility.js documentation consisten completamente en agregar elementos html a la raíz del documento. Pregunta: ¿Existe una forma de 'Mejores prácticas' para armar una página por componentes?Uso de agility.js para el diseño y la composición de la página

Aquí es un esbozo de mi aplicación html:

<html> 
    <head> ... </head> 
    <body> 
     <header> ... </header> 
     <div id=PageHolder> 
      <div id=AppPane_1></div> 
      <div id=AppPand_2></div> 
     </div> 
     <footer> ... </footer> 
    </body> 
</html>

Dentro de la divs 'AppPane' será el contenido de la solicitud.

Bien, dado todo esto, no estoy preguntando qué puedo hacer, pero me pregunto qué debo hacer.

que ver en la documentación y mi investigación que tengo 3 opciones:

crear mi página de composición de objetos atómicos agilidad y ensamblarlos en un bloque listo jQuery documento. $$.document.append(Foo) funciona para el elemento raíz, pero no pude encontrar la forma de agregar los hijos de Foo a foo.
utilizar una (muy grande) objeto agilidad que establece el html estática básica desde arriba y anexar los controles y otras cosas a que el uso de las funciones controller (que yo no ha estado capaz de ir a trabajar tampoco)
Utilice uno agilice el objeto de agilidad y añada todos los elementos secundarios usando view (de alguna manera, tampoco he podido hacer que funcione).

¿Cuál de estos es el mejor y cuál es la sintaxis involucrada? Gracias de antemano, cualquier guía en el montaje de componentes html en una aplicación de agilidad convincente sería muy apreciada.

http://jsbin.com/ojenon/1/

Fuente

2012-09-15 Evan Plumlee

Por cierto: La referencia de archivo en su jsbin está mal . Correcto: http://agilityjs.com/docs/agility.min.js – yckart

En mi opinión, la mejor manera de organizar los módulos de página es para salvar a las plantillas del lado del cliente individuales en las etiquetas de secuencia de comandos en la cabeza:

<html> 
<head> 
<script type="text/template" id="template1"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
<script type="text/template" id="template2"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
</head> 
...

Usted puede incluso elegir utilizar un lenguaje de plantilla, como jQuery.template o handlebars.js, para facilitar la lógica, la interpolación de variables, etc.

Luego, en su control ler, cargaría los contenidos html de las etiquetas de script de estas plantillas desde el DOM y los copiaría en su div de destino (#PageHolder) según corresponda.

Una alternativa a esta técnica sería el almacenamiento de sus plantillas en un objeto de JS literal en la cabeza:

<script type="text/javascript"> 
var Templates = { 
    template1: "<b>Some <abbr>HTML</abbr> template</b>" 
    ... 
} 
</script>

Esto es sólo el principio. Hay muchas más opciones, como precompilar sus plantillas, subdividir sus plantillas para evitar compilaciones redundantes de plantillas, etc. Desde un punto de vista estructural, mantener sus plantillas en un lugar de dedicación le ayudará a escalar su aplicación de una sola página.

Fuente

2012-10-28 03:38:07 mickeyreiss

Creo que son caballos para los cursos, pero mi preferencia es tener el código de la plantilla junto con el código Agility para que todo esté visible al mismo tiempo.Particularmente no me gusta ver el HTML y el estilo dentro del objeto de la vista, pero se puede configurar estos en otras variables y hacer referencia a ellos en la vista de la siguiente manera:

var frmMainTemplate = '<div>' + 
         '<input type="text" data-bind="name" />' + 
         '<p>You typed <span data-bind="name" /></p>' + 
         '</div>'; 
var frmMainStyle = '& span {background-color:#888; color:#fff;}'; 

var frmMain = $$({ 
    model: {name:''}, 
    view: { 
    format: frmMainTemplate, 
    style: frmMainStyle 
    }, 
    controller: {} 
}); 

$$.document.append(frmMain);

Fuente

2013-07-26 11:00:46 KevBrew

Uso de agility.js para el diseño y la composición de la página

Respuesta

Cuestiones relacionadas