3

Geralmente, costumo utilizar Template Engines para poder renderizar HTML via JavaScript. Uso comumente o undescore.js.

Gosto muito dessa maneira de tornar mais fácil a criação de HTML com Templates.

Exemplo:

Em algum lugar do HTML:

<script type="text/template" id="tpl-template">
   Meu nome é <b><%= nome %>
</script>

No arquivo JS

var tplTemplate = _.template($('#tpl-template').html());

$('body').append(tplTemplate({nome: 'Wallace'}));

Porém é sempre necessário ter que deixar esse código junto ao código HTML. Eu gostaria de poder organizar esses códigos em um arquivo separado (como um tpl.js), por exemplo, porém ainda não consegui uma maneira.

Creio que através do atributo src não exista maneira de se fazer isso - se existir me corrijam.

Preciso saber se existe alguma maneira de fazer isso em JavaScript.

9
  • Alguma razão especial para eu ter tomado um -1? Minha pergunta foi tão burra assim?kkkkkk 2/10/2015 às 16:14
  • 1
    Você quer fazer um novo AngularJs. Ps1 - Não fui eu que negativei. Ps2 - Você faz muitas perguntas, deve ser por isso o -1. Ps3 - Não sei a reposta. Ps4 - Já começou a fabricação nacional, vai baixar o preço. 2/10/2015 às 16:59
  • Não entendi a PS4. 2/10/2015 às 17:03
  • Muitas perguntas não é critério para negativo (Ainda bem que a minha esposa não me dá votos negativos) kkkkkk 2/10/2015 às 17:04

1 Resposta 1

0

Amigo, o melhor a ser fazer é automatizar o processo de pre-compilação, caso queira saber como faze-lo usando o Grunt, você pode ler mais a respeito neste link;

você também pode pegar o recuperar o script do script acessando a propriedade source através da propriedade source, por exemplo, se fizer isto:

console.log(_.template($('#tpl-template').html()).source)

você possivelmente terá a seguinte saida:

function(obj){
    var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
    with(obj||{}){
        __p+='    Meu nome é <b>'+
            ((__t=( nome ))==null?'':__t)+
            '</b>\n';
    }
    return __p;
}

então basicamente você apenas precisaria ter o seguinte codigo em um arquivo JS separado:

var templates = {};
templates.meuNome = function(obj){
    var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
    with(obj||{}){
        __p+='    Meu nome é <b>'+
            ((__t=( nome ))==null?'':__t)+
            '</b>\n';
    }
    return __p;
}

no seu script principal, você apenas teria de usar o templates.meuNome({nome: 'Wallace'}), sem a necessidade de ter a tag script#tpl-template na pagina.

por fim um pequeno exemplo com um utilitario para gerar os Scripts:

var textTemplate = document.getElementById("textTemplate");
var textPreCompiled = document.getElementById("textPreCompiled");
var txtNomeTemplate = document.getElementById("txtNomeTemplate");
var btPrecompilar = document.getElementById("btPrecompilar");

btPrecompilar.addEventListener("click", function (event) {
    var tmplSource = textTemplate.value;
    var template = _.template(tmplSource);

    textPreCompiled.value = "var " + txtNomeTemplate.value + " = " + template.source;
});
textarea {
    width: 100%;
    height: 240px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<textarea id="textTemplate">
  Meu nome é <b><%= nome %></b>
</textarea>
<label>
  Nome template:
  <input id="txtNomeTemplate" type="text" value="tplTemplate" />
</label>
<input id="btPrecompilar" type="button" value="PreCompilar Template" />
<textarea id="textPreCompiled">

</textarea>
<script type="text/template" id="tmplNome">

</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .