Ok, agregué el módulo de tipo y el error desapareció, pero todavía no puedo usar Moustache, tal vez lo estoy usando mal, incluso traté de incluirlo localmente, así que aquí puedes ver mi código, tal vez puedas ayudarme con eso, así que sin bigote (funcionando perfectamente) :
El lado HTML
<h2>Mustache Test</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio sint pariatur soluta nemo odit dolor ipsum laboriosam dolore ullam rerum commodi, vitae culpa totam autem praesentium, iste eveniet accusantium nam?</p> <ul id="someData"></ul>Lado de Javascript:
$.ajax({ type: "GET", url: "http://localhost:8000/api/displayAllUsers", success: function (data) { $.each(data, function (i, user) { $("#someData").append('<li> name: '+ user.name +' </li>'); }); }, error: function () { console.log("Fail"); }, });así que esto funciona perfectamente: resultados sin bigote
Pero quiero trabajar con Moustache porque necesitaré una plantilla más complicada en el futuro, así que esto es lo que probé:
Lado HTML:
<ul id="someData"> <template id ="user-template"> <li> <p> <strong>Name:</strong> <span>{{name}}</span> </p> </li> </template> </ul>Lado de Javascript:
$(document).ready(function () { var userTemplate = $("user-template").html(); function displayUsers(user){ $("#someData").append(Mustache.render(userTemplate, user)); } $.ajax({ type: "GET", url: "http://localhost:8000/api/displayAllUsers", success: function (data) { $.each(data, function (i, user) { displayUsers(user); }); }, error: function () { console.log("Fail"); }, });});
Así que no creo que me equivoque aquí, porque en la consola de mi navegador dice que Moustache no está definido, aquí está el error:
y aquí se puede ver que no se muestra nada:
El archivo que intenta cargar contiene un módulo ECMAScript .
Para usarlo, debe reescribir su código para que también sea un módulo.
Básicamente, eso significa mover su código a un elemento de secuencia de comandos con type="module" .
<script src="/js/mymodule.js" type="module"></script> Luego, dentro de su módulo de nivel superior, puede cargar dependencias usando la declaración de import .
import mustache from "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.2.0/mustache.min.js" /* mustache is now a variable with the value imported from the module */ const view = { title: "Joe", calc: function () { return 2 + 4; } }; const output = mustache.render("{{title}} spends {{calc}}", view); console.log(output);También puedes alinearlo. Demostración en vivo debajo del pliegue.
<script type="module"> import mustache from "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.2.0/mustache.min.js" const view = { title: "Joe", calc: function () { return 2 + 4; } }; const output = mustache.render("{{title}} spends {{calc}}", view); console.log(output); </script>