Uso di agility.js per il layout e la composizione della pagina

Sono nuovo alle librerie javascript in stile MVC, quindi scusami se questa domanda è troppo semplice. Sto cercando di scrivere un Single-Page Application interamente in jQuery e agility.js. Gli esempi forniti in agility.js documentation consistono interamente nell'aggiunta di elementi html alla root del documento. Domanda: Esiste un modo "Best-Practices" per assemblare una pagina in base ai componenti.Uso di agility.js per il layout e la composizione della pagina

Ecco un abbozzo del mio html app:

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

All'interno div il 'AppPane' sarà il contenuto della domanda.

Ok, dato tutto questo, non sto chiedendo cosa posso fare, ma sto chiedendo cosa dovrei fare.

vedo dalla documentazione e la mia ricerca che ho 3 scelte:

creare la mia composizione pagina da oggetti agilità atomiche e assemblarli in un blocco pronto jQuery documento. $$.document.append(Foo) funziona per l'elemento radice, ma non riuscivo a capire come aggiungere i figli di Foo a pippo.
utilizzare una (molto grande) oggetto di agilità, che delinea il codice html statico dall'alto e accoda controlli e quant'altro a che utilizzando le funzioni controller (che ho havn't stato in grado di andare al lavoro o)
Utilizzare uno oggetto l'agilità radice e aggiungere tutti i bambini su di esso utilizzando la vista (in qualche modo, havn't stato in grado di convincere quello per funzionare neanche.)

quale di questi è meglio, e qual è la sintassi coinvolti? Grazie in anticipo, qualsiasi consiglio sull'assemblaggio di componenti html in un'app agility convincente sarebbe molto apprezzato.

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

fonte

2012-09-15 Evan Plumlee

BTW: il riferimento al file nel vostro jsbin è sbagliato . Esatto: http://agilityjs.com/docs/agility.min.js – yckart

A mio parere, il modo migliore per organizzare i moduli della pagina è quello di salvare i singoli modelli sul lato client nei tag di script nella testa:

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

Si potrebbe anche scegliere utilizzare un linguaggio template, come jQuery.template o handlebars.js, per facilitare la logica, l'interpolazione variabile, ecc.

Quindi, nel tuo controllo Per esempio, caricheresti il contenuto html dei tag script di questi modelli dal DOM e li copi nel div di destinazione (#PageHolder) come appropriato.

Un'alternativa a questa tecnica sarebbe memorizza i modelli in un oggetto JS letterale nella testa:

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

Questo è solo l'inizio. Esistono molte altre opzioni, come la pre-compilazione dei modelli, la suddivisione dei modelli per evitare compilazioni di template ridondanti, ecc. Dal punto di vista strutturale, mantenere i modelli in una posizione di dedica ti aiuterà a ridimensionare l'app per singola pagina.

fonte

2012-10-28 03:38:07 mickeyreiss

Sono cavalli per i corsi, suppongo, ma la mia preferenza è di avere il codice del template accanto al codice di Agility in modo che sia tutto visibile insieme.Non mi piace particolarmente di vedere il codice HTML e lo stile all'interno dell'oggetto di vista, ma è possibile impostare questi in altre variabili e riferimento nella vista in questo modo:

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

fonte

2013-07-26 11:00:46 KevBrew

Uso di agility.js per il layout e la composizione della pagina

risposta

Problemi correlati