Clase 8

Formularios

Para formularios si nosotros queremos que el celular nos muestre el teclado de números o calendario debemos especificar el tipo de datos que esperamos en los imput, por ejemplo si queremos que el usuario digite números podemos: 

<input type="number" >

En el caso de que se quiera mostrar el selector de fecha del sistema operativo tendríamos que usar el tipo date:

<input type="date" >

Además si quisiéramos restringir el ingreso de datos podríamos utilizar el tipo email que limita al usuario a ingresar un correo en el campo de texto.

<input type="email" >

También están los tipos tel, y url que nos pueden ser útiles.

Plantillas y rutas

Con handlebars las plantillas generadas se ven como un html normal, entonces en un ejemplo de cartas de materialize se vería como esto.

      <div class="row">
        <div class="col s12 m7">
          <div class="card">
            <div class="card-image">
              <img src="{{img}}">
              <span class="card-title">{{title}}</span>
            </div>
            <div class="card-content">
              <p>{{content}}</p>
            </div>
            <div class="card-action">
              <a href="#">abrir</a>
            </div>
          </div>
        </div>
      </div>

Para incluir una plantilla en nuestro HTML lo ponemos con un script

<script id="entry-template" type="text/x-handlebars-template"> nuestra plantilla </script>

Para compilar el código mediante la plantilla se ejecuta

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Si se va a utilizar una plantilla en otro archivo se puede llamar a la misma con el siguiente código

$.get('templates/products.hbs', function (data) {
    var template=Handlebars.compile(data);
    $(target).html(template(jsonData));
}, 'html')

JS Bin on jsbin.com

Angular

angular example

Ejemplo mas completo: angular-example

Links útiles