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

2023年1月31日 269次阅读

我最近使用了Framework7,它太棒了！但是,正如我刚刚开始的那样,我不知道如何将页面的一部分移动到单独的
HTML文件中.我有一个非常长的index.html,我想将内页移动到其他HTML文件中.例如,在这种情况下,我想将view-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>

最佳答案 您可以通过以下步骤执行此操作：

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以获取有关如何在模板中使用此数据的更多信息.我希望这有帮助.

点赞