我怎样才能包括小胡子js

Question

好的，所以我添加了类型模块，错误消失了，但我仍然不能使用 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

Answer 1

您尝试加载的文件包含 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>

我怎样才能包括小胡子js

how can i include mustache js

javascript

html

mustache