Framework7:如何将超文本标记语言作为单独的文件移出

Question

我最近用过Framework7，它很棒！但是，由于我刚刚开始，我不知道如何将页面的一部分移到单独的HTML文件中。我有一个很长的index.html，我想把里面的页面移到其他的HTML文件中。例如，在本例中，我想将页面索引移到view-3内移出，以及如何在index.html中显示其内容。

我已经在文档中上下查找，但我找不到解决方案。

任何建议都是值得感谢的。

<div id="view-3" class="view tab">
    <div class="pages">

      <!-- how to move this div out into another html file and loads its content, displays it here? -->

      <!-- from here -->

      <div data-page="index-3" class="page">
        <div class="page-content">
          <div class="content-block-title">Another plain static view</div>
          <div class="content-block">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    </p>
            <p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    </p>
          </div>
        </div>
      </div>

    <!-- to here -->

    </div>
  </div>

Answer 1

您可以通过以下几个步骤完成此操作：

1.从文件获取html

var _html;

$.ajax({
    url: 'path/to/template/name.html',
    dataType: 'html',
    async: false,
    success: function(html) {
        _html = html;
    }
});

2.使用Template7编译(在初始化应用时需要)

var template = Template7.compile(_html);

3.将html添加到文件

$('#selector').html(template(data));

您可以将数据设置到此模板。有关如何在模板中使用此数据的更多信息，请阅读Template7。我希望这能有所帮助。