Use of keys to display javascript

Asked

Viewed 95 times

2

With angular and other frameworks it is necessary to display values or call javascript functions inside keys in the middle of html code.example:

<div>{{exibeNome()}}</div>

How can I use this without these frameworks.

javascript

1 answer

2


These frameworks compile HTML and insert what is inside {{ }} in HTML. This is done differently from framework to framework.

This can be very complex and from the outset needless to re-invent. Examples of this are as mentioned by Angular but also Pug, Ejs, JSX, etc.

If you have an object and a piece of HTML, the thing could be done so, very simplistically:

var conteudo = {
  nome: 'Maria',
  idade: function() {
    return new Date().getFullYear() - 1978;
  }
}


function parser(html) {
  var regex = /{{(.+?)}}/g;
  return html.replace(/{{(.+?)}}/g, function(match, cmd) {
    return eval('conteudo.' + cmd.trim());
  });
}


var p = document.querySelector('p');
p.innerHTML = parser(p.innerHTML, conteudo);
<p>A {{ nome }} tem {{ idade() }} de idade.</p>

The ideas within that code are:

  • find the commands to execute on the object/class with the content
  • create a function that runs eval() within the right context, could be using a .bind() but I simplified it here
  • replace values in HTML

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.