Framework7: как вынести HTML в отдельный файл

Я недавно использовал Framework7, и это здорово! Однако, поскольку я только начал, я не знаю, как переместить часть страницы в отдельный файл HTML. У меня очень длинный index.html, и я хотел бы переместить внутренние страницы в другие файлы HTML. Например, в этом случае я хотел бы переместить страницу index-3 внутрь представления-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>

html ajax html-framework-7
person RoundOutTooSoon    schedule 23.03.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это в несколько шагов:

<сильный>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, чтобы узнать, как использовать эти данные внутри шаблона. Я надеюсь, что это поможет.

person Petroff    schedule 12.02.2016