Puede Bigote Plantillas de hacer extensión de plantilla?

Soy nuevo en el Bigote.

Muchos lenguajes de plantillas (por ejemplo, Django /Jinja) te permitirá extender el «padre» de la plantilla de este modo…

base.html

<html><head></head>
    <body>
    {% block content %}{% endblock %}
    </body>
</html>

frontpage.html

{% extends "base.html" %}
{% block content %}<h1>Foobar!</h1>{% endblock %}

prestados frontpage.html

<html><head></head>
    <body>
    <h1>Foobar!</h1>
    </body>
</html>

Soy consciente de Bigote parciales (por ejemplo, {{>content}}), pero los que parecen ser justo incluye.

Hace plantilla de extensión para Bigote? O, en su defecto, hay al menos algunas patrón de diseño que convierte a incluye en la plantilla de extensión equivalentes.

InformationsquelleAutor Chris W. | 2011-10-28

8 Kommentare

  1. 61

    Recientemente me encontré en el mismo barco, excepto yo venía de un marrajo de fondo.

    Bigote no permite la extensión de plantilla/herencia, pero hay un par de opciones disponibles para usted, que yo sepa.

    1. Usted podría utilizar parciales:

      {{>header}}
          Hello {{name}}
      {{>footer}}
    2. Usted podría inyectar plantilla pre-procesamiento de las funciones en el contexto de cada plantilla que debe heredar de otra página:

      {{#extendBase}}      
          Hello {{name}}
      {{/extendBase}} 

      Hash:

      {
         "name": "Walden",
         "extendBase": function() {
             return function(text) {
                 return "<html><head></head>" + render(text) + "</body></html>"
             }
         }
      }
    3. Anteponer y anexar el deseado HTML para las páginas relevantes en el controlador.

    4. Tiene una plantilla de diseño de ala:

      {{>header}}
          {{{body}}}
      {{>footer}}

      Y representar el cuerpo en el controlador, que pasa a la plantilla de diseño como una variable denominada body.

    5. Implementar la herencia de plantillas pre-bigote, en el código que carga las plantillas.

    Yo no, sin embargo, el uso de la triple bigote, porque no quiero que sin escape HTML para aparecer en cualquier lugar, es demasiado arriesgado, en mi opinión.

    Si alguien tiene una mejor solución a este problema que me encantaría escucharlo así, ya que todavía no he dado el paso en cualquiera de estas direcciones.

    • Debe #4 «triple bigote?»–{{{body}}}
    • Sí, por desgracia es correcto, lo que descarta #4 para mí. He actualizado la respuesta.
    • En definitiva, la creación reutilizables sub-plantillas y la implementación de la herencia en la plantilla el código de carga (es decir, #5) es mucho más flexible, y más seguro, en general. El problema con la plantilla de la herencia es que al escribir la plantilla exterior, nunca se puede tener un buen sentido de lo que es necesario (o no se requiere) en un niño de la plantilla. Esto a menudo resulta en la inclusión de JS/CSS que puede ser necesario para un niño en particular de la página (pero innecesario para otro) en el exterior de la plantilla. La única manera de evitar este problema cuando se utiliza la plantilla de la herencia es para pasar el JS/CSS requisitos como una variable.
    • Twitter de la versión de bigote admite la herencia de plantillas.
    • (@Walden tal vez debería añadir un «no». 0 o no. 6 a su lista y mencionar Hoogian? Gracias por agregar el comentario de todos modos 🙂 )
    • Es, entonces, un parcial similar a una forma de uso incluye en PHP?

  2. 3

    Usted podría utilizar variables que contienen HTML. Un «triple bigote» como {{{variable}}} devolverá sin escape HTML. No es exactamente el mismo que el de la plantilla de extensiones, pero puede hacer que frontpage-content.html y, a continuación, poner en su salida un content variable que se le pasa a base.html.

    (He añadido -contenido a la frontpage.html nombre de archivo con la expectativa de que un patrón de nomenclatura ayudará a mantener los nombres de los archivos manejables.)

  3. 3

    Bigote no hacer la plantilla de extensión.

    Si usted realmente desea extensión de plantilla, a continuación, puede que desee utilizar una biblioteca de propósito construido con esta funcionalidad del lenguaje/framework de elección.


    FYI, estoy usando el Nodo.js/Express, así que probablemente va a terminar usando https://github.com/fat/stache

  4. 1

    Estoy jugando ahora en Python (nota yo soy el creador de Mako), añadiendo en un contexto dinámico que captura secciones parece estar haciendo lo correcto, aunque me gustaría necesitan probar esto mucho más.

    Básicamente estamos utilizando expresiones lambda, donde un «<» prefijo indica que «heredan de esta plantilla» (similar a la sintaxis discutido en https://github.com/mustache/spec/issues/38) y un «$» prefijo indica que «esta es una enfermedad hereditaria de la sección».

    import pystache
    
    class NameSpace(object):
        def __init__(self, renderer, vars_={}):
            self.renderer = renderer
            self._content = {}
            self.vars = vars_
    
        def add_content(self, name, value):
            self._content[name] = value
    
        def __getattr__(self, key):
            if key in self.vars:
                # regular symbol in the vars dictionary
                return self.vars[key]
            elif key.startswith("<"):
                # an "inherit from this template" directive
                name = key[1:]
                return inheritor(self, name)
            elif key.startswith("$"):
                # a "here's a replaceable section" directive
                name = key[1:]
                if name in self._content:
                    # if we have this section collected, return the rendered
                    # version
                    return sub_renderer(self, name)
                else:
                    # else render it here and collect it
                    return collector(self, name)
            else:
                # unknown key.
                raise AttributeError(key)
    
    def sub_renderer(namespace, key):
        def go():
            def render(nested):
                return namespace._content[key]
            return render
        return go
    
    
    def collector(namespace, key):
        def go():
            def render(nested):
                content = namespace.renderer.render(nested, namespace)
                namespace.add_content(key, content)
                return content
            return render
        return go
    
    
    def inheritor(namespace, name):
        def go():
            def render(nested):
                namespace.renderer.render(nested, namespace)
                return namespace.renderer.render_name(name, namespace)
            return render
        return go

    Así que, he aquí algunas de las plantillas. de la base.bigote:

    <html>
    
    {{#$header}}
        default header
    {{/$header}}
    
    {{#$body}}
        default body
    {{/$body}}
    
    {{#$footer}}
        default footer, using {{local key}}
    {{/$footer}}
    
    
    </html>

    hola.bigote:

    {{#<base}}
    
    {{#$header}}
        new header
    {{/$header}}
    
    {{#$body}}
        new body, with {{local key}}
    {{/$body}}
    
    {{/<base}}

    y luego a jugar con tres niveles de profundidad, subhello.bigote:

    {{#<hello}}
    
    {{#$footer}}
        im some new footer
    {{/$footer}}
    
    {{/<hello}}

    Representación hola.bigote como este:

    renderer = pystache.Renderer(search_dirs=["./templates/"])
    
    print renderer.render_name("hello",
                        NameSpace(renderer, {"local key": "some local key"}))

    de salida:

    <html>
    
        new header
    
        new body, with some local key
    
        default footer, using some local key
    
    
    </html>

    Representación subhello.bigote:

    print renderer.render_name("subhello",
                        NameSpace(renderer, {"local key": "some local key"}))

    de salida:

    <html>
    
        new header
    
        new body, with some local key
    
        im some new footer
    
    
    </html>

    Acabo de escribir esto en veinte minutos, y sólo lo he usado handlebars.js un poco en el pasado y pystache por primera vez justo ahora, así que todo el «bigote» la idea no es profundo para mí todavía. Pero esto parece funcionar ?

  5. 0

    En node.js usted puede utilizar express-manillar o hogan-express a tener diseños inna bigote plantillas, pero la forma de hacer las cosas es diferente, en ninguno de ellos se establece el diseño de la plantilla en sí, los diseños están registrados en el código de la aplicación.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea