Herramientas de usuario
sp:fw:handlebarsjs
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
sp:fw:handlebarsjs [2013/07/15 11:23] alfred creado |
sp:fw:handlebarsjs [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Handlebars.js ====== | ====== Handlebars.js ====== | ||
| * [[http://handlebarsjs.com/|Página web]] | * [[http://handlebarsjs.com/|Página web]] | ||
| + | |||
| + | ===== Uso ===== | ||
| + | ==== Agregar a la página ==== | ||
| + | Primero agregaremos el link: | ||
| + | <code html> | ||
| + | <script type="text/javascript" src="/scripts/handlebars-0.9.0.pre.4.js" /> | ||
| + | </code> | ||
| + | Segundo crearemos la plantilla: | ||
| + | <code html> | ||
| + | <script id="some-template" type="text/x-handlebars-template"> | ||
| + | <table> | ||
| + | <thead> | ||
| + | <th>Username</th> | ||
| + | <th>Real Name</th> | ||
| + | <th>Email</th> | ||
| + | </thead> | ||
| + | <tbody> | ||
| + | {{#users}} | ||
| + | <tr> | ||
| + | <td>{{username}}</td> | ||
| + | <td>{{firstName}} {{lastName}}</td> | ||
| + | <td>{{email}}</td> | ||
| + | </tr> | ||
| + | {{/users}} | ||
| + | </tbody> | ||
| + | </table> | ||
| + | </script> | ||
| + | </code> | ||
| + | Tercero, la compilaremos y mostraremos: | ||
| + | <code javascript> | ||
| + | var source = $("#some-template").html(); | ||
| + | var template = Handlebars.compile(source); | ||
| + | var data = { users: [ | ||
| + | {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }, | ||
| + | {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" }, | ||
| + | {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" } | ||
| + | ]}; | ||
| + | $("#content-placeholder").html(template(data)); | ||
| + | </code> | ||
| + | |||
| + | ===== Elementos ===== | ||
| + | ==== Condicionales ==== | ||
| + | ==== Iteradores ==== | ||
| + | Para pasar un array (//launchers// tiene un array y la plantilla acepta //nodes//): | ||
| + | <code javascript> | ||
| + | $("#nav").html(template({nodes: launchers})); | ||
| + | </code> | ||
| + | Para coger el primer elemento de un array: | ||
| + | <code html> | ||
| + | <ul id="first_element_in_people"> | ||
| + | {{people.1.name}} | ||
| + | </ul> | ||
| + | </code> | ||
| + | Esta es la forma de asignar un array: | ||
| + | <code html> | ||
| + | <select class="span3"> | ||
| + | {{#each configs}} | ||
| + | <option>{{.}}</option> | ||
| + | {{/each}} | ||
| + | </select> | ||
| + | </code> | ||
| + | Si tenemos algo como un array de arrays (''log: <nowiki>[[1, 2, 3], [5,6,7], [8,2,4]]</nowiki>'') lo asignaremos: | ||
| + | <code html> | ||
| + | <tbody> | ||
| + | {{#each log}} | ||
| + | <tr> | ||
| + | {{#each this}} | ||
| + | <td>{{ this }}</td> | ||
| + | {{/each}} | ||
| + | </tr> | ||
| + | {{/each}} | ||
| + | </tbody> | ||
| + | </code> | ||
| + | Podemos indicar el índice del elemento: | ||
| + | <code html> | ||
| + | {{#each array}} | ||
| + | {{@index}}: {{this}} | ||
| + | {{/each}} | ||
| + | </code> | ||
sp/fw/handlebarsjs.1373887413.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
