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

这不是一个脚本，它是用手柄或小胡子模板制作的模板。

你不能＆＃34;来源＆＃34;它们与<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

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

Answer 2

首先，考虑使用像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 );
} );

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

2 个答案: