javascript - hbs - Manillares, carga de archivos de plantillas externas.
npm hbs (3)
El código está envuelto en un IIFE ( Expresión de función invocada inmediatamente ), lo que significa que la función se ejecuta inmediatamente. Eso es lo que significa lo siguiente:
(function x() {
console.log(''hello'');
})();
También puedes hacer:
(function() {
console.log(''hello'');
}());
Las IIFE se utilizan comúnmente para crear un ámbito "privado" para un poco de código, de modo que se ejecute bien (no entre en conflicto) con cualquier otra cosa.
La segunda función que proporcionaste tiene más sentido y quizás la primera debe haber sido solo un ejemplo.
Los manillares le permiten precompilar sus plantillas para que no tenga que compilarlas en tiempo de ejecución. Además, de esta manera, no tiene que realizar solicitudes HTTP adicionales solo para cargar la (s) plantilla (s).
Por ejemplo, si tengo la siguiente estructura de proyecto ( tenga en cuenta que mis modelos, colecciones y vistas están todos dentro de main.js solo para este ejemplo y todos los archivos .js están en mi directorio raíz ):
├── Gruntfile.js
├── handlebars-v2.0.0.js
├── index.html
├── main.js
├── package.json
└── templates
└── todo.handlebars
Mi todo.handlebars ve así: solo html con la sintaxis de Handlebars:
<h3>{{title}}</h3>
<p>Created by: {{author}}</p>
Para precompilar mi plantilla, haría lo siguiente en la línea de comandos ( primero tiene que instalar el script de precompilación de manillares con: npm install -g handlebars ):
> handlebars templates/todo.handlebars -f todo.tpl.js
Ahora mi estructura de proyecto se ve así:
├── Gruntfile.js
├── handlebars-v2.0.0.js
├── index.html
├── main.js
├── package.json
├── templates
│ └── todo.handlebars
└── todo.tpl.js
Verá que se ha agregado un archivo todo.tpl.js a mi directorio raíz. Podría haberle dado un nombre diferente si quisiera, siempre y cuando la extensión sea un .js porque el archivo contiene un código JavaScript válido. También podría haber especificado un directorio diferente para enviarlo a. Recuerde que el archivo todo.tpl.js es la plantilla real que usará su Vista Backbone. Usted escribe su HTML en todo.handlebars y lo compila como todo.tpl.js
Ahora que tengo el archivo todo.tpl.js , puedo usar Grunt para tal vez reunir todos mis archivos de plantilla JS en un archivo all_templates.js o puedo hacer referencia a cada archivo directamente en mi HTML como:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="handlebars-v2.0.0.js"></script>
<script src="todo.tpl.js"></script> <!-- My Template for a Todo item -->
<script src="main.js"></script>
En mi vista Backbone, que en mi caso vive dentro de mi archivo main.js , obtendría la plantilla así:
var TodoView = Backbone.View.extend({
tagName: ''li'',
className: ''todo-item'',
events: {
},
// You can grab your template function with the name you chose when
// you precompiled it from: `Handlebars.templates`
template: Handlebars.templates.todo,
initialize: function(options) {
this.listenTo(this.model, ''change'', this.render);
},
render: function() {
this.$el.html(this.template( this.model.toJSON() ));
return this;
}
});
¡Y tu estas listo! Más información aquí:
- http://handlebarsjs.com/precompilation.html
- https://www.npmjs.org/package/handlebars
- http://code.tutsplus.com/tutorials/introduction-to-handlebars--net-27761 ( lea donde se habla de precompilación )
Mi objetivo es colocar todas mis plantillas de manillares en una sola carpeta, de esta manera:
templates/products.hbs
templates/comments.hbs
Encontré este fragmento en algunos lugares a través de una búsqueda superficial en Google, que aparentemente se cargará en plantillas de Handlebar en archivos externos, lo que tiene mucho más sentido que colocar un montón de plantillas en un solo archivo de índice.
(function getTemplateAjax(path) {
var source;
var template;
$.ajax({
url: path, //ex. js/templates/mytemplate.handlebars
cache: true,
success: function(data) {
source = data;
template = Handlebars.compile(source);
$(''#target'').html(template);
}
});
})()
El problema es que no entiendo esta función o cómo usarla. ¿Por qué toda la función está entre paréntesis y luego se hace una llamada de función? por ejemplo, (function x() { ... })() No sé qué está haciendo esto.
Y si no me equivoco, parece que $(''#target'') está codificado cuando no debería estarlo. Además, ¿no se supone que esto establezca una variable de data algún lugar para que las variables a las que se hace referencia en la plantilla funcionen? Parece que la función correcta debe ser:
function getTemplateAjax(path, target, jsonData) {
var source;
var template;
$.ajax({
url: path, //ex. js/templates/mytemplate.handlebars
cache: true,
success: function(data) {
source = data;
template = Handlebars.compile(source);
$(target).html(template(jsonData));
}
});
}
Nota al margen: si alguien pudiera indicarme un mejor motor de plantillas, uno que realmente admita de forma nativa los archivos de plantillas externos y esté mejor organizado que los manillares, estaría eternamente agradecido.
Otro problema: en realidad no puedo nombrar mis archivos mytemplate.hbs , porque cuando ocurre la llamada Ajax, se ve como un archivo binario y aparece como binario. Supongo que este es un problema de configuración del tipo mime del servidor para .hbs en texto / html o texto / sin formato, pero el problema es que este es un servidor Grunt y no estoy seguro de cómo cambiar sus tipos de mimo.
He creado un complemento simple para lograr esto. Más información sobre esto: https://github.com/miketimmerman/load-template
Puede leer la plantilla desde un archivo externo sin necesidad de colocar html con la etiqueta de script
$.get(''templates/products.hbs'', function (data) {
var template=Handlebars.compile(data);
$(target).html(template(jsonData));
}, ''html'')