Header Ads Widget

Ticker

6/recent/ticker-posts

Enrutamiento y creación de plantillas de ClojureScript con Secretary y Enfocus

Hace un buen rato, estaba buscando buenas formas de hacer enrutamiento y plantillas del lado del cliente en ClojureScript. Investigué usando un montón de marcos de JavaScript de ClojureScript, de los cuales Angular probablemente dio los resultados más prometedores, pero aún así me sentí un poco sucio y pesado. Incluso implementé mi propio mecanismo de enrutamiento / plantilla basado en Pedestal y goog.History, pero algo se sentía mal todavía.

Las cosas han cambiado y hoy en día hay muchos rumores sobre las bibliotecas basadas en React como Reagent y Om . Sospecho que React en el frente con un montón de bibliotecas ClojureScript "nativas" puede ser una mejor manera de hacerlo.

Sin embargo, antes de llegar allí, quiero volver a visitar el enrutamiento y las plantillas. Veamos cómo podemos unir dos bonitas bibliotecas: Secretary para enrutamiento y Enfocus para plantillas.

Digamos que nuestra aplicación tiene dos pantallas que ocupan toda la página. Todavía no hay varios "fragmentos" para componer la página. Queremos ver una página cuando navegamos /#/addy otra en /#/browseLa página de "exploración" será un poco más avanzada y admitirá parámetros de ruta. Por ejemplo, /#/browse/Stuffqueremos analizar las "Cosas" y mostrar un encabezado con esta palabra.

El HTML principal podría verse así:

01
02
03
04
05
06
07
08
09
10
<!DOCTYPE html>
<html>
<body>
    <div class='container-fluid'>
        <div id='view'>Loading...</div>
    </div>
 
    <script src='js/main.js'></script>
</body>
</html>

Entonces tenemos dos plantillas.

add.html:

1
2
3
4
<h1>Add things</h1>
<form>
  <!-- boring, omitted -->
</form>

navegar.html:

1
2
3
4
<h1></h1>
<div>
  <!-- boring, omitted -->
</div>

Ahora, todo lo que queremos hacer es llenar el #viewelemento en la página principal con una de las plantillas cuando cambia la ubicación. El código completo para esto se encuentra a continuación.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
(ns my.main
  (:require [secretary.core :as secretary :include-macros true :refer [defroute]]
            [goog.events :as events]
            [enfocus.core :as ef])
  (:require-macros [enfocus.macros :as em])
  (:import goog.History
           goog.History.EventType))
 
(em/deftemplate view-add 'templates/add.html' [])
 
(em/deftemplate view-browse 'templates/browse.html' [category]
  ['h1'] (ef/content category))
 
(defroute '/' []
  (.setToken (History.) '/add'))
 
(defroute '/add' []
  (ef/at
    ['#view'] (ef/content (view-add))))
 
(defroute '/browse/:category' [category]
  (ef/at
    ['#view'] (ef/content (view-browse category))))
 
(doto (History.)
  (goog.events/listen
    EventType/NAVIGATE
    #(em/wait-for-load (secretary/dispatch! (.-token %))))
  (.setEnabled true))

¿Que esta pasando?

  1. Definimos dos plantillas Enfocus. view-addes trivial y simplemente devuelve la plantilla completa. view-browseEs un poco más interesante: dado el nombre de la categoría, modifique la plantilla reemplazando el contenido de la h1etiqueta con el nombre de la categoría.
  2. Luego definimos las rutas de la Secretaría para usar esas plantillas. Todo lo que hacen ahora es reemplazar el contenido del #viewelemento con la plantilla. En el caso de la ruta de "exploración", pasa el nombre de la categoría analizado de la ruta a la plantilla.
  3. Hay una ruta predeterminada que redirige de //addNo conduce a example.com/add, pero sólo establece el fragmento: example.com/#/add.
  4. Finalmente, conectamos Secretario a goog.HistoryNo estoy seguro de por qué no está en la caja, pero es bastante sencillo.
  5. Tenga en cuenta que en el controlador de historial está la em/wait-for-loadllamada. Es necesario para Enfocus si carga plantillas con llamadas AJAX.

Eso es todo, muy simple y directo.

Publicar un comentario

0 Comentarios