javascript - 如何在单独的文件中管理html逻辑

Question

我有一段 html 代码负责根据特定条件呈现列表:

<!-- Show list only if there are more than 5 results -->
        <div list.numberOfResults > 10">
          <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
          <b>Country: </b>{{list.country}} 
        </div>

 <!-- Show list only if there are less than 10 results -->
        <div list.numberOfResults < 10">
          <b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}} 
          <b>Country: </b>{{list.country}} 
        </div>

现在，我还有一些可选参数 (list.country)，所以我需要检查它之前是否不为空。

我相信有一种方法可以将这个逻辑从这个 html 文件中提取出来，并制作一个负责逻辑的文件，html 将相应地呈现数据，有人可以分享一个简单的例子来说明如何做到这一点基于我的代码？

谢谢!!

Answer 1

由于有两个组件，您可以将它们保存在单独的文件中，例如名称

component.html

然后你可以像这样在index.html中导入

<link rel="import" href="component.html" >

或者你可以像这样从文件中抓取特定部分

   ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from component.html's document.
    var el = content.querySelector('.component');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>