Недавно я посетил Windows 8 DevCamp с намерением впервые установить новейшую ОС Microsoft и заставить jQuery Geo работать как собственное приложение поверх WinJS.
Что такое jQuery Geo?
jQuery Geo ( http://jquerygeo.com ) — это API-интерфейс для отображения JavaScript, концептуально схожий с Bing Maps API и Google Maps API. Он имеет открытый исходный код и по умолчанию использует открытые данные, но может использовать любую службу карт и данных, которую разработчик пожелает использовать. Он хорошо документирован, а дизайн API вдохновлен элегантным стилем самого jQuery. Пишите меньше, карту больше!
Это сработало?
Да!
Помимо $.ajax jQuery Geo не использует сам AJAX, так что это не проблема.
Единственное изменение, которое мне пришлось внести в исходный код jQuery Geo, заключалось в том, чтобы окружить любой текст HTML, используемый для динамического создания элементов, с помощью метода JavaScript для Windows 8: toStaticHtml Это необходимо, когда вы передаете HTML любому методу манипуляции jQuery, например append.
Перед:
.append( '<div />' )
После:
.append( toStaticHTML( '<div />' ) )
Это все, что мне пришлось изменить в исходном коде jQuery Geo, чтобы он работал в приложениях Магазина Windows. Читайте дальше для более подробной информации.
WinJS в Visual Studio 2012 отладка приложения jQuery Geo Windows Store (привязано справа), отображающего твиты
обсуждение
Что насчет jQuery?
В Windows 8 можно создавать приложения Магазина Windows с использованием HTML, CSS и JavaScript. Итак, что насчет jQuery? В тот момент, когда передо мной появился пустой проект WinJS, я включил его.
Поскольку мы создаем настольное приложение, которое можно установить из Магазина Windows, мы должны включить минимизированный скрипт jQuery в наш проект и ссылаться на него локально.
В Visual Studio 2012 создайте новый проект с:
FILE => Новый проект => Шаблоны => JavaScript => Стиль Магазина Windows => Пустое приложение.
Затем загрузите копию 1.8.1 с http://jquery.com/download . Включите его в папку js проекта и добавьте его в default.html :
<script src="/js/jquery-1.8.1.min.js"></script>
При запуске приложения вы получите три ошибки «Невозможно добавить динамический контент». Это функция jQuery / Sizzle, обнаруживающая движок JavaScript. Тесты основаны на динамическом контенте, созданном с использованием innerHTML Windows 8 не позволяет этого без метода toStaticHTML Тем не менее, я не обнаружил проблем с этим при портировании jQuery Geo и надеюсь, что большая часть jQuery работает как положено. Если вы обнаружите иное, вы можете скачать неминифицированную версию jQuery и добавить toStaticHTML
HTML1701
Помимо начальных тестов jQuery, вы будете получать ту же ошибку каждый раз, когда будете использовать методы манипуляции jQuery самостоятельно (например, append Полный текст ошибки:
HTML1701: невозможно добавить динамический контент ». Сценарий попытался внедрить динамическое содержимое или элементы, ранее динамически измененные, что может быть небезопасно. Например, использование свойства innerHTML для добавления скрипта или деформированного HTML сгенерирует это исключение. Используйте метод toStaticHTML для фильтрации динамического содержимого или явно создайте элементы и атрибуты с помощью метода, такого как createElement. Для получения дополнительной информации см. Http://go.microsoft.com/fwlink/?LinkID=247104 .
Первым предложением сообщения об ошибке является завершение вашего HTML в вызове toStaticHTML Это включает любой HTML, отправленный в jQuery. Метод toStaticHTML Например, он полностью удалит теги script и link, а также встроенные обработчики событий. Я нашел в Интернете несколько сообщений о том, что он также удаляет атрибуты данных HTML5, но в моем тестировании этого не произошло. jQuery Geo сильно зависит от атрибутов данных и без них не очень хорошо работает в Windows 8.
Второе предложение — использовать методы DOM, такие как createElement
Поскольку jQuery Geo не добавляет ничего вредоносного, я решил последовать первому предложению и обернуть наш динамический HTML. У нас есть восемь звонков, которые приходят примерно на 112 символов. Мы можем уменьшить это, используя приемы минимизации.
Наконец, если вы ожидаете, что изменение в ядре jQuery обернет HTML-код внутренне, не теряйте надежды. Команда jQuery работает над веб-стандартами, и это не является ни сетью, ни стандартом. Для разработчиков более правильно изменить способ вызова append, когда они знают, что пишут приложение для Магазина Windows.
Только перенос текста
Когда я впервые начал добавлять toStaticHTML Я добавлял его к каждому вызову, чтобы добавлять и добавлять в библиотеку. В результате все мои карты имели строку [object Object] Я думал, что это будет трудная ошибка, чтобы выследить.
Проблема заключалась в том, что я вызывал toStaticHTML Коллекция представляла элементы, которые мне нужно было перемещать в DOM (используя detachappend toStaticHTMLtoString
this._$existingChildren.detach( );
this._$elem.html( '' );
this._$elem.append( toStaticHTML( this._$existingChildren ) ); // don't use toStaticHTML here
Поездка в оба конца
Метод toStaticHTML Он был введен в IE8 как опция безопасности первого прохода для очистки пользовательского ввода. Веб-приложения обычно работают в «песочнице» и не имеют большого доступа к системе. Приложения Магазина Windows запускаются на рабочем столе как пользователь с различными уровнями доступа. В этом контексте имеет больше смысла требовать очистки в попытке предотвратить вредоносные действия, такие как удаление файлов пользователя.
Может показаться болезненным вызывать этот метод в любое время, когда вы хотите создать динамические элементы с HTML-текстом, но я рад, что это все, что мне нужно было сделать, чтобы перенести jQuery Geo на Windows 8. jQuery Geo 1.0b2 будет поддерживать Приложения для Магазина Windows.