如何从 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 文件中的脚本。我想把它移到它自己的外部文件中。如何才能做到这一点？当我 link 它时，我是否像引用其他文件一样引用它？例如：

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

提前致谢。

Answer 1

首先，考虑使用像 Angular.js 或 React.js 这样的框架，但这应该适合你：

假设您要将其放入 id=items 的 div 中： <div id="items"> Your code... </div>

在 html 文件中，在 <body> 结束标记之前添加：

<script type="text/javascript" src="code.js"></script> 包括你的代码和这个 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 包括 jQuery.

创建一个code.js文件，在里面放入以下代码：

$(document).ready( function() {
    var myCode = "{{#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}}";

$( "#items" ).html( myCode );
} );

Answer 2

这不是脚本，而是使用车把或小胡子模板制作的模板。

您不能像使用 Javascript 那样使用 <script src="..."> "source" 它们，但它们可以存储在外部，然后在运行时加载和处理。这需要通过 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

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

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

How to take a script from an HTML file and move it to it's own .JS file?

javascript

html

external

html-framework-7