node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

express-diana

express-diana

Para DianaJS

Importante
Esta modificacion de express es creada para ser ejecutada en Diana.js, por lo que se recomienda el uso de Diana.js en lugar del uso directo de express-diana, tambien es obligatorio usar ejs-diana como tecnologia de renderizado para un mejor resultado.

Carasteristicas

Layout y variable yield

express-diana se basa en layouts, por lo que al hacer render en el objeto response la vista sera mostrada adentro de un layout (los layouts se encuentran en la ruta /app/views/layouts, y por defecto el nombre layout sera 'application').

Para poder usar el layout correctamente, incluye en el template el archivo que se quiere renderizar, el nombre del archivo se almacena en la variable yield, un ejemplo escrito en EJS seria el siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>DianaJS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/assets/bootstrap.min.css">
</head>
<body>
    <%- include(yield) %>
</body>
</html>

Existen dos formas para cambiar el valor de yield, la primera es usando el objeto express para asignar una variable: app.set("layout", <nombre_del_layout>), la otra forma es desde el metodo layout del objeto response de express: res.layout(<nombre_del_layout>). NOTA: todos los layouts deben estar dentro del directorio /app/views/layouts

Aplicaciones Multilenguaje

Para iniciar el modo multilenguaje tan solo se necesita seguir los siguientes pasos:

  1. Con el metodo set de express activar la variable translate
  2. Con el metodo set de express asignar el locale de la applicacion (por defecto 'en')
  3. Con el metodo set de express asignar el locale por defecto, este sera tomado en cuenta cuando la aplicacion no encuentre el locale definido (por defecto 'en')
  4. Con el metodo set de express definir los locales permitidos para la aplicacion (por defecto ['en'])
app.set('translate', true);
// asumiendo que el usuario habla español
app.set('locale','es');
app.set('default_locale','es')
app.set('permit_locales', ['en', 'es']);
ViewHelpers y EJS-Diana

link_to(title, url [,html_options])

  • link_to("Next", "?page=2") =><a href="?page=2">Next</a>
  • link_to("Next", "?page=2", {class: "btn btn-info"}) =><a href="?page=2" class="btn btn-info">Next</a>

audio_tag(sources [,html_options])

  • audio_tag("song.mp3") => <audio src="song.mp3"></audio>
  • audio_tag("song.mp3", {class: "audio hidden", controls: "controls"}) => <audio src="song.mp3" class="audio hidden" controls="controls"></audio>
  • audio_tag(["song.mp3", "song.ogg"]) => <audio><source src="song.mp3" /><source src="song.ogg" /></audio>

favicon_link_tag([source, html_options])

  • favicon_link_tag() => <link href="/assets/img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
  • favicon_link_tag("/assets/img/ico.ico") => <link href="/assets/img/ico.ico" type="image/x-icon" rel="shortcut icon" />
  • favicon_link_tag("apple.png" {rel: "apple-touch-icon", type: "image/png"}) => <link href="apple.png" type="image/png" rel="apple-touch-icon" />

image_tag(source [,html_options])`

  • image_tag("image.png") => <img src="image.png" />
  • image_tag("image.png", {class: "img center"}) => <img src="image.png" class="img center" />

javascript_include_tag(source [,html_options])`

  • javascript_include_tag("jquey.js") => <script src="jquery.js"></script>
  • javascript_include_tag("jquey.js", {async: "async"}) => <script src="jquery.js" async="async"></script>

stylesheet_link_tag(source [,html_options])

  • stylesheet_link_tag("bootstrap.css") => <link rel="stylesheet" type="text/css" href="bootstrap.css">
  • stylesheet_link_tag("print.css", {media: "print"}) => <link rel="stylesheet" type="text/css" href="print.css" media="print">

video_tag(sources [,html_options])

  • video_tag("myVideo.mp4") => <video src="myVideo.mp4"></video>
  • video_tag("myVideo.mp4", {class: "video hidden", controls: "controls"}) => <video src="myVideo.mp4" class="video full-screen" controls="controls"></video>
  • audio_tag(["myVideo.mp4", "myVideo.ogg"]) => <video><source src="myVideo.mp4" /><source src="myVideo.mp4" /></video>