Question

我最近使用过Framework7，非常棒！但是，正如我刚刚开始的那样，我不知道如何将页面的一部分移到单独的HTML文件中。我有一个很长的index.html，我想将内页移动到其他HTML文件中。例如，在这种情况下，我想将视图-3中的页面index-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进行编译（初始化应用时需要template7Pages: true）

var template = Template7.compile(_html);

第3。将html添加到您的文件

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

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

Framework7：如何将HTML作为单独的文件移出

1 个答案: