4

我最近使用了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>
4

1 回答 1

2

您可以通过以下步骤做到这一点：

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以了解如何在模板中使用此数据的更多信息。我希望这会有所帮助。

于 2016-02-12T15:29:12.350 回答