Programming

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.

====== Handlebars.js ======
  * [[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>

Programming

Herramientas de usuario

Herramientas del sitio

Herramientas de la página