Cómo puedo combinar plantillas de diferentes archivos HTML

Question

Dado que las plantillas individuales de Knockout se mantienen en etiquetas de script, pensé que podía establecer el atributo src de la etiqueta y cargar el HTML desde un archivo separado. Si lo hace, ingenuamente, simplemente no funcionó, así que o

1. Hay un poco de truco para conseguir la unión de las plantillas para trabajar con src etiqueta que necesito utilizar
2. Hay una manera diferente para cargar plantillas de diferentes archivos

(las otras dos posibilidades - 3, se espera que todos los programadores en este proyecto para modificar el mismo archivo gigantesco, que será cargado por el navegador en el arranque, y 4, no utilice para Knockoutjs algo más grande que un proyecto de juguete - Considero equivalente.)

Answer 1

Un navegador no responderá al src en cualquier elemento que tenga un tipo distinto de uno de los diversos tipos de 'javascript' y con ellos intentará ejecutar el resultado como un script.

varias opciones aunque:

• uso de un motor de plantillas que pueden tirar de las plantillas de forma remota (el mejor es aquí: https://github.com/ifandelse/Knockout.js-External-Template-Engine).

• Coloque las etiquetas de scripts que contienen plantillas y cárguelas. Algo así podría extraer los contenidos usando el src como ubicación. Debería tener cuidado cuando llame a applyBindings, si sus plantillas no están listas.

  $("script[type='text/html']").each(function(index, el) { $.get($(el).attr("src"), 
      function(response) { 
       $(el).text(response); }); 
  }); 
  

• Estas son algunas otras opciones que miré por hacer esto un tiempo atrás: http://www.knockmeout.net/2011/03/using-external-jquery-template-files.html

Answer 2

Cada plantilla en mi proyecto es su propio archivo html. Utilizo una convención de nomenclatura (* .ko.html) para identificarlos. Mi cadena de acumulación es la siguiente:

Paso 1: La pelusa y el minify archivos * .ko.html Esto es sólo para eliminar los comentarios (excepto los <!-- ko -->) y tira espacios en blanco extra para una carga útil más compacto.

Paso 2: Stringify y concat minified html en un archivo js. Los js se ve algo como

var templates={ 
    'name1':'some stringified html', 
    'name2':'some more' 
}; 

Yo considero concatenar en un archivo html con <script type="text/plain"> delimitadores pero elegí js porque de esta manera se puede cargar utilizando un simple <script> etiqueta en lugar de una ajax obtienen + inyectar.

Paso 3: repare el motor de plantilla nativo para recuperar plantillas de mi objeto js.

var engine = new ko.nativeTemplateEngine(); 
engine._makeTemplateSource = engine.makeTemplateSource; 

engine.makeTemplateSource = function (template, doc) {   
    if (typeof (template) === 'string' && templates[template]) { 
     return { text: function() { return templates[template]; } }; 
    } 
    return engine._makeTemplateSource(template, doc); 
}; 
ko.setTemplateEngine(engine); 

Mi aplicación utiliza gruntjs para realizar estas etapas de la generación.(Ronco-contrib-htmlmin, ronco-contrib-concat)

opciones para htmlmin:

{ 
removeComments: true, 
collapseWhitespace: true, 
ignoreCustomComments: [/^\s*ko /, /^\s*\/ko /] 
} 

opciones para concat

{ 
    stripBanners: true, 
    banner: "(function(t){", 
    footer: "})(window.templates || (window.templates={}));", 
    process: function (src, file) { 
     return 't[\'' + file.replace(/^.*\//, '').replace('.ko.html', '') + '\']=' + JSON.stringify(src) + ';'; 
    } 
} 

Para cualquiera que se pregunte por qué alguien querría hacer esto: Los archivos fuente de plantillas son archivos html individuales estándar que se pueden editar en cualquier editor html y fuente controlada como tal. Editar HTML html dentro de las etiquetas <script> no es divertido. Como beneficio adicional, los archivos fuente pueden incluir comentarios que serán eliminados. Las plantillas se pueden volver a usar en cualquier página al incluir la etiqueta de script: no es necesario insertarlas en todas las páginas. El paquete resultante es un archivo estático que los navegadores pueden almacenar fácilmente en caché, mientras que las plantillas incrustadas en una página generada dinámicamente no pueden hacerlo. Más o menos las mismas razones para agrupar archivos javascript.