Seguimos una entrada más conociendo #TypeScript y los beneficios de RequireJS, que no son pocos. En una entrada previa ya vimos un ejemplo de cómo añadir un plugin de jQuery a nuestro proyecto para trabajar, y ahora vamos a hacer lo mismo, pero en este caso, con un plugin de Bootstrap, RequireJS usando TypeScript.
Yo he elegido este DatePicker, que es algo común en los proyectos en los que suelo trabajar. Básicamente, se trata de adjuntar una selección de fecha al pulsar una casilla de entrada.
El plugin elegido no es al azar, puesto que he investigado varios hasta dar con uno que es sencillo, y que me gusta: http://vitalets.github.io/bootstrap-datepicker/. Empezamos!
Utilizando la plantilla de RequireJs
Para este pequeño ejercicio, vamos a utilizar la plantilla que se explicó aquí, y que incluye RequireJS, jQuery, Bootstrap (depende de jQuery). No vamos a cargar nada mediante HandleBars, y aunque está en la plantilla original, en este ejercicio se ha eliminado (porque no se utiliza).
Simplemente vamos a incluir una cabecera, y una entrada para la fecha:
<div class="container jumbotron"> <h2 > RequireJS, Bootstrap, Bootstrap plugin with locals </h2> </div> <div id="main" class="container"> Fecha: <div class="well" id="datetimepicker"> <div class="input-append date" id="mi_fecha" data-date="2012-02-13" data-date-format="yyyy-mm-dd"> <input class="span2" size="16" type="text" value="2012-02-13"> <span class="add-on"><i class="icon-calendar"></i></span> </div> </div> </div>
Utilizar un plugin requiere de 3 pasos
Para agregar un plugin de Bootstrap, es necesario seguir 3 pasos. El primero, trabajar las interfaces de interfaces.ts y ampliar.
interface JQuery {
datepicker: any
}
El segundo paso es la configuración de RequireJS, config.ts, donde tenemos que incluir la ruta tanto al plugin como a las modificaciones locales.
/// <reference path="./typings/require.d.ts" />
/**
* Application configuration declaration.
*/
require.config({
baseUrl: 'ts/',
paths: {
//main libraries
"jquery": '../js/jquery',
"bootstrap": '../js/bootstrap.min',
"bootstrap-datetime": "../js/bootstrap-datepicker",
"bootstrap-datetime-es": "../js/bootstrap-datepicker.es"
//shortcut paths
},
shim: {
"jquery": {
exports: '$'
},
"bootstrap": {
deps: ['jquery']
},
"bootstrap-datetime": {
deps: ["jquery", "bootstrap"],
exports: "$.fn.datepicker"
},
"bootstrap-datetime-es": {
deps: ["bootstrap-datetime"]
}
}
});
require(["app"]);
Lo fundamental es la ubicación correcta de la ruta en path, y en shim poner las dependencias correctas. En el caso del archivo bootstrap-datepicker.es, vamos a ver su código:
;(function($){
$.fn.datepicker.dates['es'] = {
days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"],
daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
today: "Hoy"
};
}(jQuery));
Analizando este código, queda justificado el export a ficha función ( $.fn.datepicker) que hay que hacer en shim de bootstrap-datetime, y que las dependencias son jQuery y Bootstrap (esto es muy importante!!).
App.ts
Por último, sólo nos queda modificar el código de app.ts para que se cargue el plugin, y eso se hace insertando la correspondiente línea en require.
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/require.d.ts" />
/// <reference path="../typings/bootstrap.d.ts" />
/// <reference path="menu.ts" />
/// <amd-dependency path="menu.ts" />
require([
'Menu',
'jquery',
'bootstrap',
'bootstrap-datetime',
"bootstrap-datetime-es"
], (MenuApp, $) => {
'use strict';
$(() => {
var menu = new MenuApp();
});
});
Simple, ¿verdad?
Dandole vida al ejemplo en menu.ts
Ya sólo nos queda aplicar la funcionalidad desde menu.ts, con este breve código:
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/bootstrap.d.ts" />
/// <reference path="interfaces.ts" />
import $ = require("jquery");
class MenuApp {
private debug: boolean = false;
constructor() {
console.log('Plantilla cargada con exito!');
var datapicker_opciones = {
language: 'es',
autoclose: true
}
$('#mi_fecha').datepicker(datapicker_opciones);
}
}
export = MenuApp;
Es importante que al utilizar este plugin, le asignes los valores correspondientes según necesites, incluido el lenguaje es. Para ello, léete bien la documentación!
Y aquí lo tienes en acción:
Typescript Bootstrap DatePicker plugin
RequieJS no es tan fiero cómo lo pintan
Espero que con esta serie de entradas sobre RequireJS en acción le hayas perdido el miedo a utilizar esta fantástica librería, pero que facilita mucho la vida, sobre todo por el tema de dependencias. Un papel fundamental para el éxito de esta libreria es la configuración, que siendo metódico cómo hemos visto en este ejemplo, es bastante sencillo de utilizar!
Happy coding!