我怎样才能包括小胡子js
how can i include mustache js
好的,所以我添加了类型模块,错误消失了,但我仍然不能使用 Mustache,也许我用错了,我什至试图在本地包含它,所以在这里你可以看到我的代码,也许你可以提供帮助我用它,所以没有小胡子(完美工作):
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>
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");
},
});
所以这是完美的:
results without Mustache
但我想使用 Mustache,因为我以后需要更复杂的模板,所以我尝试了以下方法:
Html 边:
<ul id="someData">
<template id ="user-template">
<li>
<p>
<strong>Name:</strong>
<span>{{name}}</span>
</p>
</li>
</template>
</ul>
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");
},
});
});
所以我认为我在这里没有错,因为在我的浏览器控制台中它说 Mustache 未定义,这是错误:
error
这里你可以看到什么都没有显示:
data displayed
您尝试加载的文件包含 ECMAScript module.
要使用它,您需要重写您的代码,以便它也是一个模块。
本质上,这意味着将您的代码移动到带有 type="module"
的脚本元素中。
<script src="/js/mymodule.js" type="module"></script>
然后,在您的顶级模块中,您可以使用 import
statement.
加载依赖项
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);
你也可以内联它。首屏现场演示。
<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>
好的,所以我添加了类型模块,错误消失了,但我仍然不能使用 Mustache,也许我用错了,我什至试图在本地包含它,所以在这里你可以看到我的代码,也许你可以提供帮助我用它,所以没有小胡子(完美工作):
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>
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");
},
});
所以这是完美的: results without Mustache
但我想使用 Mustache,因为我以后需要更复杂的模板,所以我尝试了以下方法:
Html 边:
<ul id="someData">
<template id ="user-template">
<li>
<p>
<strong>Name:</strong>
<span>{{name}}</span>
</p>
</li>
</template>
</ul>
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");
},
});
});
所以我认为我在这里没有错,因为在我的浏览器控制台中它说 Mustache 未定义,这是错误:
error
这里你可以看到什么都没有显示:
data displayed
您尝试加载的文件包含 ECMAScript module.
要使用它,您需要重写您的代码,以便它也是一个模块。
本质上,这意味着将您的代码移动到带有 type="module"
的脚本元素中。
<script src="/js/mymodule.js" type="module"></script>
然后,在您的顶级模块中,您可以使用 import
statement.
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);
你也可以内联它。首屏现场演示。
<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>