Несколько HTML-страниц с использованием Intel App Framework

#appframework

Вопрос:

Итак, у меня есть приложение, из которого я пытаюсь удалить все jQuery Mobile и теперь использую Intel App Framework. У меня возникли проблемы с пониманием того, как интегрировать несколько HTML-страниц в приложение, чтобы мне не нужно было хранить весь мой код в одном файле. Я попробовал это:

 $.ui.loadContent("page2.html");

но это, похоже, не работает. Я получаю счетчик загрузки содержимого, но, похоже, ничего не происходит.

Как связать страницы из разных файлов?

1. LoadContent загружает другую панель (div), а не html-файл, вообще говоря, это хлопотно. Я использовал его с angular js и пытался использовать шаблоны, это сработало, но не сработало, представления не отображались должным образом, и в итоге я получил один большой HTML-файл..

2. Может быть слишком поздно, но используйте идентификатор div. Если я не ошибаюсь, без использования хэша

3. Значит, все мое приложение должно быть в одном HTML-файле? Это звучит ужасно для поддержки..

4. это не так уж плохо, но было бы хорошо, если бы страницы могли находиться в отдельных файлах.

Ответ №1:

Хорошо, я понял это. Иногда бывает сложно найти документацию, и на их веб-сайте сейчас нет окна поиска. Но если вы перейдете к быстрому запуску, а затем к AFUI (слева), а затем к свойствам панели, они говорят:

data-defer="filename.html" — Это загрузит содержимое на панель с удаленной страницы / URL. Это полезно для разделения содержимого на разные файлы. af.ui.ready недоступен, пока все файлы не будут загружены асинхронно.

Так что в моем index.html файл У меня есть что-то вроде этого:

 <div id="afui">
    <nav>
        <ul class="list">
            <li><a href="#post-lunch_panel" class="icon heart">Post a Lunch</a></li>
            <li><a href="#profile_panel" class="icon user">Personal Profile</a></li>
            <li><a href="#select-university_panel" class="icon chat">Select University</a></li>
        </ul>
    </nav>


<!--Main View Pages-->
<div class="panel" title="Events" id="event-list_panel" data-defer="event-list.html" data-load="loadMainEventsList">  </div>

<div class="panel" title="Description" id="description_panel" data-defer="description.html" data-load="loadEventDetails">  </div>

<div class="panel" title="Select University" id="select-university_panel" data-defer="select-university.html">  </div>

</div> <!--id="afui"-->

и затем у меня есть сведения о каждой странице в отдельных файлах. На мой взгляд, это буквальное копирование / вставка, и я пока не нашел никаких доказательств того, что это не просто копирование / вставка.

Обновить:

в AF3 data-defer теперь data-include