使用 handlebars.js 重用组件

Question

我正在尝试为我网站的不同网页创建可重用的组件。 我开始使用handlebars.js，我现在有下面的代码，我可以用它传递简单的HTML 代码并将其显示在网页上。 但是我想渲染一个完整的导航栏组件，并且最好以某种方式从另一个 html 或车把文件链接到。 有任何想法吗？

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js"></script>
</head>
<body>
    <script id="template" type="template/handlebars">
        <h1> my website </h1>
        {{>navigationBar}}
    </script>
    <script>
         var partialSrc = "some link to navbar";
         Handlebars.registerPartial("navigationBar",partialSrc);
     var templateSrc = document.getElementById("template").innerHTML;
     var template = Handlebars.compile(templateSrc);
     document.body.innerHTML += template();
    </script>
</body>

Answer 1

您如何看待将模板作为字符串写入外部 JS 文件的变量中并单独加载？

模板.js

var templateSrc = '<h1> my website </h1>\
    {{>navigationBar}}';

索引.html

<body>
<script src="template.js"></script>
<script type="text/javascript">
  var partialSrc = "some link to navbar";
  Handlebars.registerPartial("navigationBar",partialSrc);
  let template = Handlebars.compile(templateSrc);
  document.body.innerHTML += template();
</script>
</body>

这是一个简化的演示文稿。 当然，您必须确保在使用把手编译之前加载了template.js 。

如何在另一个 JavaScript 文件中包含 JavaScript 文件？

使用 handlebars.js 重用组件

问题描述

1 个解决方案

解决方案1
-1 2020-07-24 12:35:24

使用 handlebars.js 重用组件

问题描述

1 个解决方案

解决方案1 -1 2020-07-24 12:35:24

解决方案1
-1 2020-07-24 12:35:24