javascript - 如何从 HTML 文件中获取脚本并将其移动到它自己的 .JS 文件中？

Question

我正在尝试简化我的 HTML 文件，并且我有很长的脚本，其中仅包含 HTML(模板)，我想将其移动到自己的外部文件中。当 <script> 时，这对我来说很容易做到。标签涉及函数，但就我而言，它只是直接的 HTML。在新的外部文件中，如何正确输入这些 HTML 标签？见下文。

    <script type="text/template7" id="myStuffTemplate">
  {{#each results}}
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">{{this.name}}</div>
            </div>
            <div class="item-text">{{this.description}}</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  {{else}}
  <div style="text-align:center">
    <h1>Nothing yet!</h1>
    <h2>Upload things you're willing to trade so you can start trading!</h2>
  </div>
  {{/each}}
</script>

这是 HTML 文件中的脚本。我希望将其移至其自己的外部文件中。怎样才能做到这一点呢？当我链接它时，我是否像引用其他文件一样引用它？例如:

<script type="text/template7"  src="js/views/mystuff.js" id="myStuffTemplate"></script>

提前致谢。

Answer 1

这不是脚本，而是用 Handlebars 或 mustache 模板制作的模板。

您无法使用<script src="...">“获取”它们就像使用 Javascript 一样，但它们可以存储在外部，然后在运行时加载和处理。这需要通过 AJAX 调用异步完成。例如，假设您使用 jQuery，您可以通过以下方式实现:

// request the template
$.get('templates/products.hbs', function(rawTemplate) {
    // once received, convert the raw template to a handlebars template
    var template = Handlebars.compile(rawTemplate);
    // compile the template with your context 'data' and set it on an element with an id
    $('#someTargetId').html(template(data));
}, 'html'); // <-- tell jquery to load the file as html

请注意，即使是小模板也需要一些时间来加载，因此页面加载和模板加载然后显示之间会有延迟。