Создание приложения Windows 8 Metro с помощью jQuery

Я только начинаю разработку Windows 8 с помощью HTML/JS. Последние несколько месяцев я провел в разработке jQuery для приложений, ориентированных на головные устройства и телевизоры.

Прыгая в это, я думал, что переход будет простым. У меня есть дизайн и структура моего сайта, которые все выяснялись по большей части и надеялись следовать некоторым из тех практик, которые я использовал для своей предыдущей работы.

То есть, я хочу по существу создать одностраничное приложение. Основной файл default.html будет содержать верхнюю навигацию/заголовок и еще один div. Другой div будет использоваться для загрузки на всех других страницах, все отдельные HTML файлы в проекте.

Все глобальные функции и основные функции будут находиться в файле javascript, application.js. Тогда любой javascript, специфичный для страницы, будет находиться в верхней части каждого файла HTML.

Я быстро понимаю, что это проблема. Использование jQuery.load() для загрузки на моих страницах приводит к ошибкам безопасности в моем приложении.

Ошибка выполнения JavaScript: невозможно добавить динамический контент. A script попытался добавить динамический контент или элементы, ранее измененные динамически, что может быть небезопасным. Например, с помощью свойства innerHTML для добавления script или неверного HTML будет создано это исключение. Используйте метод toStaticHTML для фильтрации динамического содержимого или явно создавайте элементы и атрибуты с помощью метода, такого как createElement.

Я действительно надеялся избежать необходимости изучать кучу специфических для Microsoft материалов. Я думаю, что здорово, что они предоставили множество инструментов, а что нет, и, может быть, я просто не использовал их достаточно, но все просто слишком жестко для меня и для того, что я пытаюсь сделать или уже может быть достигнуто с jQuery. Я тот, кто любит ТОЧНО, что происходит и имеет полный контроль над ним.

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

Есть ли способ сделать то, что я надеялся, и создать одностраничное приложение? У них есть своя замена jQuery.load()?

Любая помощь, указывающая мне в правильном направлении, будет очень признательна!

EDIT 8/14/2012:

Я попытался использовать исправление из этого вопроса: Использование jQuery с Windows 8 Приложение Metro JavaScript вызывает ошибки безопасности

Это избавляет от предупреждения о безопасности, и я могу загрузить его в HTML с помощью jQuery.load(). Однако, глядя на DOM-проводник, мой HTML лишен моих скриптов.

Я также попытался обернуть мой вызов .load() внутри MSApp.execUnsafeLocalFunction(), но опять же мой файл по-прежнему лишен всех скриптов. Что дает?

Ответ 1

Существует "формальный" способ делать то, что вы ищете.
WinJS.Navigation предоставляется для поддержки "одностраничных приложений". Например, default.html будет содержать разметку, которая будет представлять, куда будет идти динамически загруженное содержимое страницы:

<div id="contenthost" 
    data-win-control="Application.PageControlNavigator" 
    data-win-options="{home: '/pages/home/home.html'}">
</div>

В приведенном выше примере фактическая загруженная страница контента находится в /pages/home/home.html

В обработчиках событий вы можете просто сделать следующее: load или перейти на другую страницу:

WinJS.Navigation.nav("/pages/other/page.html");

Правда, это не jQuery, но он отлично работает:)

Ответ 2

Я исправил, просто изменив строку jQuery, которая вызывала ошибку.

jQuery-1.8.0, строка 5566:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                self.appendChild(elem);  // problem line
            }
        });
    },

Изменено на:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                var self = this;
                MSApp.execUnsafeLocalFunction(function () {
                    self.appendChild(elem);
                });
            }
        });
    },

Ответ 3

В зависимости от вашего приложения, если вы не намереваетесь получить доступ к каким-либо компонентам WinRT, вы можете перемещать свою страницу в ms-appx-web, которая изменит политику безопасности на странице, но вы не можете указать это из запуска, Вам нужно будет выполнить навигацию и использовать этот новый контекст securyt.

Другим вариантом, который у вас есть, является перенос вызовов в JQuery с помощью функции msWWA.execUnsafeLocalFunction, которая позволит включить весь этот небезопасный код в DOM