我怎样才能包含mustache 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");
  },
});

所以这工作完美： 没有 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 未定义，这是错误：

错误

，在这里您可以看到没有显示任何内容：

显示数据

Answer 1

您尝试加载的文件包含 ECMAScript 模块。

要使用它，您需要重写代码，使其也是一个模块。

本质上，这意味着使用 type="module" 将代码移动到脚本元素中。

<script src="/js/mymodule.js" type="module"></script>

然后，在顶级模块内，您可以使用 导入语句。

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>