Plantilla externa en bajo
https://stackoverflow.com/questions/8366733
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
yo suelo Plantilla subrayada. Es posible adjuntar un archivo externo como plantilla?
En la vista de la columna vertebral tengo:
textTemplate: _.template( $('#practice-text-template').html() ),
initialize: function(){
this.words = new WordList;
this.index = 0;
this.render();
},
En mi html es:
<script id="practice-text-template" type="text/template">
<h3>something code</h3>
</script>
Funciona bien. Pero Necesito una plantilla externa. Lo intento:
<script id="practice-text-template" type="text/template" src="templates/tmp.js">
o
textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),
o
$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })
Pero no funcionó.
Solución
EDITAR: Esta respuesta es vieja y anticuada. Lo eliminaría, pero es la respuesta "aceptada". Inyectaré mi opinión en su lugar.
Ya no abogaría por hacer esto. En cambio, separaría todas las plantillas en archivos HTML individuales. Algunos sugerirían cargar estos asíncronos (requirir.js o una especie de caché de plantilla). Eso funciona bien en pequeños proyectos, pero en grandes proyectos con muchas plantillas, te encuentras haciendo una tonelada de pequeñas solicitudes de asíncrono en la carga de la página que realmente no me gustan. (Ugh ... OK, puedes moverte con necesidad de requerir.
Me gusta usar una tarea Grunt (Grunt-Contrib-JST) para compilar todas las plantillas HTML en un solo archivo de plantillas.js e incluirlo. Obtienes lo mejor de todos los mundos de la OMI ... Las plantillas viven en un archivo, la compilación de dichas plantillas ocurre en la hora de construcción (no en tiempo de ejecución), y no tienes cien pequeñas solicitudes de asíncrono cuando se inicia la página.
Todo lo que sigue es basura
Para mí, prefiero la simplicidad de incluir un archivo JS con mi plantilla. Entonces, podría crear un archivo llamado View_template.js que incluye la plantilla como una variable:
app.templates.view = " \
<h3>something code</h3> \
";
Luego, es tan simple como incluir el archivo de script como uno normal y luego usarlo en su vista:
template: _.template(app.templates.view)
Dando un paso más allá, yo Realmente Use CoffeeScript, para que mi código realmente se vea más así y evite los personajes de escape de fin de línea:
app.templates.view = '''
<h3>something code</h3>
'''
El uso de este enfoque evita que se mueva. JS donde realmente no es necesario.
Otros consejos
Aquí hay una solución simple:
var rendered_html = render('mytemplate', {});
function render(tmpl_name, tmpl_data) {
if ( !render.tmpl_cache ) {
render.tmpl_cache = {};
}
if ( ! render.tmpl_cache[tmpl_name] ) {
var tmpl_dir = '/static/templates';
var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
var tmpl_string;
$.ajax({
url: tmpl_url,
method: 'GET',
dataType: 'html', //** Must add
async: false,
success: function(data) {
tmpl_string = data;
}
});
render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
}
return render.tmpl_cache[tmpl_name](tmpl_data);
}
Usar "Async: False" aquí no es una mala manera porque en cualquier caso debe esperar hasta que se cargue la plantilla.
Entonces, la función de "renderizar"
- le permite almacenar cada plantilla en un archivo HTML separado en DIR estático
- es muy liviano
- Plantillas de compilación y cachés
- Lógica de carga de plantilla de resúmenes. Por ejemplo, en el futuro puede usar plantillas precompiladas y precompiladas.
- es fácil de usar
Estoy editando la respuesta en lugar de dejar un comentario porque creo que esto es importante.
Si las plantillas no aparecen en aplicación nativa, y ves HIERARCHY_REQUEST_ERROR: DOM Exception 3, mira la respuesta de Dave Robinson a ¿Qué puede causar exactamente un "jerarquía_request_err: DOM Exception 3" -Error?.
Básicamente, debes agregar
dataType: 'html'
a la solicitud $ .AJAX.
Esta mezcla le permite representar una plantilla externa utilizando Guion bajo de manera muy simple: _.templateFromUrl(url, [data], [settings]). Método La API es casi la misma que Subrayado _.modelo(). Estado en caché incluido.
_.mixin({templateFromUrl: function (url, data, settings) {
var templateHtml = "";
this.cache = this.cache || {};
if (this.cache[url]) {
templateHtml = this.cache[url];
} else {
$.ajax({
url: url,
method: "GET",
async: false,
success: function(data) {
templateHtml = data;
}
});
this.cache[url] = templateHtml;
}
return _.template(templateHtml, data, settings);
}});
Uso:
var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});
No quería usar requerir.js para esta tarea simple, así que utilicé la solución modificada de Koorchik.
function require_template(templateName, cb) {
var template = $('#template_' + templateName);
if (template.length === 0) {
var tmpl_dir = './templates';
var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
contentType: 'text',
complete: function (data, text) {
tmpl_string = data.responseText;
$('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
if (typeof cb === 'function')
cb('tmpl_added');
}
});
} else {
callback('tmpl_already_exists');
}
}
require_template('a', function(resp) {
if (resp == 'tmpl_added' || 'tmpl_already_exists') {
// init your template 'a' rendering
}
});
require_template('b', function(resp) {
if (resp == 'tmpl_added' || 'tmpl_already_exists') {
// init your template 'b' rendering
}
});
¿Por qué agregar plantillas para documentar, en lugar de almacenarlas en el objeto JavaScript? Porque en la versión de producción me gustaría generar un archivo HTML con todas las plantillas ya incluidas, por lo que no necesitaré hacer ninguna solicitud de AJAX adicional. Y al mismo tiempo no necesitaré hacer ninguna refactorización en mi código, como uso
this.template = _.template($('#template_name').html());
En mis vistas de la columna vertebral.
Esto puede estar un poco fuera de tema, pero podría usar Grunt (http://gruntjs.com/), que se ejecuta en node.js (http://nodejs.org/, disponible para todas las plataformas principales) para ejecutar tareas desde el línea de comando. Hay un montón de complementos para esta herramienta, como un compilador de plantilla, https://npmjs.org/package/grunt-contrib-jst. Ver documentación en GitHub, https://github.com/gruntjs/grunt-contrib-jst. (También deberá comprender cómo ejecutar el administrador de paquetes de nodo, https://npmjs.org/. No te preocupes, es increíblemente fácil y versátil. )
Luego puede mantener todas sus plantillas en archivos HTML separados, ejecute la herramienta para precompilarlas a todas con un guión bajo (lo que creo que es una dependencia del complemento JST, pero no se preocupe, el administrador de paquetes de nodo instalará dependencias automáticas para usted).
Esto compila todas sus plantillas para un script, digamos
templates.js
Cargar el script establecerá un global - "JST" de forma predeterminada, que es una variedad de funciones, y se puede acceder así:
JST['templates/listView.html']()
que sería similar a
_.template( $('#selector-to-your-script-template'))
Si coloca el contenido de esa etiqueta de script en (plantillas/) listView.html
Sin embargo, el verdadero pateador es este: Grunt viene con esta tarea llamada 'Watch', que básicamente monitoreará los cambios en los archivos que ha definido en su archivo Grunt.js local (que es básicamente un archivo de configuración para su proyecto Grunt, en JavaScript ). Si tiene gruñido, comience esta tarea por usted, escribiendo:
grunt watch
Desde la línea de comando, Grunt supervisará todos los cambios que realiza a los archivos y exigirá automáticamente todas las tareas que ha configurado en ese archivo Grunt.js si detecta cambios, como el JST Tarea descrita anteriormente. Edite y luego guarde sus archivos, y todas sus plantillas se vuelven a compilar en un archivo JS, incluso si se extienden a través de varios directorios y subdirectorios.
Se pueden configurar tareas similares para pelear su JavaScript, ejecutar pruebas, concatenar y minificar / ulificar sus archivos de script. Y todos se pueden vincular a la tarea de reloj para que los cambios en sus archivos activen automáticamente una nueva 'compilación' de su proyecto.
Se necesita algo de tiempo para configurar las cosas y comprender cómo configurar el archivo Grunt.js, pero bien, vale la pena invertir el tiempo, y no creo que alguna vez vuelva a una forma de trabajar previamente gruñida.
pienso este es lo que podría ayudarte. Todo en la solución gira en torno a require.js Biblioteca que es un archivo JavaScript y cargador de módulos.
El tutorial en el enlace de arriba muestra muy bien cómo se podría organizar un proyecto de columna vertebral. A Implementación de muestra también se proporciona. Espero que esto ayude.
Me interesé en JavaScript Templating y ahora estoy dando los primeros pasos con Backbone. Esto es lo que se me ocurrió y parece funcionar bastante bien.
window.App = {
get : function(url) {
var data = "<h1> failed to load url : " + url + "</h1>";
$.ajax({
async: false,
url: url,
success: function(response) {
data = response;
}
});
return data;
}
}
App.ChromeView = Backbone.View.extend({
template: _.template( App.get("tpl/chrome.html") ),
render: function () {
$(this.el).html(this.template());
return this;
},
});
App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();
Tuve que establecer el tipo de datos en "texto" para que funcione para mí:
get : function(url) {
var data = "<h1> failed to load url : " + url + "</h1>";
$.ajax({
async: false,
dataType: "text",
url: url,
success: function(response) {
data = response;
}
});
return data;
}
Encontré una solución que funcione para mí con el uso de jQuery.
Agrego el código de plantilla de subrayamiento, con el método jquery.load (), al archivo HTML principal.
Una vez que está allí, lo estoy usando para generar las plantillas. ¡Todos necesitan suceder sincrónicamente!
El concepto es:
Tengo un código de plantilla de mapa de subrayamiento:
<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
<% _.each(rc, function(rowItem, index){ %>
<ul class="map-row" data-row="<%- index %>">
<li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
...
</script>
Y pongo ese código en un archivo llamado mapa-plemado.html
Después de eso, creo AA Wrapper para los archivos de plantilla.
<div id="templatesPool"></div>
Luego incluyo ese archivo en mi archivo HTML principal como SO.
En cabeza:
<!-- Template Loader -->
<script>
$(function(){
$("#templatesPool").append($('<div>').load("map-template.html"));
});
</script>
Salud.
Sé que esta pregunta es realmente antigua, pero surgió como el primer resultado en una búsqueda en Google de plantillas AJAX subrayadas.
Estaba cansado de no encontrar una buena solución para esto, así que creé la mía:
https://github.com/ziad-saab/underscore-async-templates
Además de cargar plantillas subrayadas con AJAX, agrega la funcionalidad < % incluido %>. Espero que pueda ser útil para alguien.
Estaba un poco incómodo forzando a jQuery a funcionar sincrónicamente, por lo que modifiqué el ejemplo sincrónico anterior usando promesas. Es más o menos lo mismo, pero funciona asincrónicamente. Estoy usando plantillas de HBS en este ejemplo:
var asyncRenderHbs= function(template_name, template_data) {
if (!asyncRenderHbs.template_cache) {
asyncRenderHbs.template_cache= {};
}
var promise= undefined;
if (!asyncRenderHbs.template_cache[template_name]) {
promise= new Promise(function(resolve, reject) {
var template_url= '/templates/' + template_name;
$.ajax({
url: template_url,
method: 'GET',
success: function(data) {
asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
resolve(asyncRenderHbs.template_cache[template_name](template_data));
},
error: function(err, message) {
reject(err);
}
});
});
} else {
promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
}
return promise;
};
Luego para usar el HTML renderizado:
asyncRenderHbs('some_template.hbs', context)
.then(function(html) {
applicationMain.append(html);
// Do other stuff here after html is rendered...
})
.catch(function(err) {
// Handle errors
});
Nota: Como se discutió por otros, sería preferible compilar todas las plantillas en un solo archivo de plantillas.js y cargarlo al principio en lugar de tener muchas pequeñas llamadas AJAX sincrónicas para obtener plantillas cuando se carga la página web.
ADVERTENCIA ADELANTE - Aquí hay dragones:
Menciono que el enfoque que se muestra a continuación simplemente para ayudar a quienes luchan por hacer que las pilas ASP.NET (y marcos similares) funcionen armoniosamente con el ecosistema de JS-LIBS. No hace falta decir que esta no es una solución genérica. Una vez dicho esto ...
/Endforwardwarning
Si está utilizando ASP.NET, puede externalizar sus plantillas simplemente colocándolas dentro de una o más vistas parciales propias. También conocido como dentro de tu .cshtml:
@Html.Partial("path/to/template")
Dentro de su plantilla.cshtml:
// this is razorview and thusly if you ever need to use the @ character in here
// you will have to either escape it as @@ or use the html codepoint which is @
// http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
<script type="text/x-template" id="someId">
<span class="foo"><%= name %></span>
</script>
Y ahora puedes usar la plantilla como de costumbre:
_.template($("#someId").html())({ name: "Foobar" });
Espero que este enfoque elusivamente obvio ayude a alguien a ahorrar una hora de raspadio.
