[Из песочницы] JavaScript Dynamic Content shim для Windows JavaScript Apps

Посвящается разработчикам, которые пытались заставить популярные веб-фрейморки, такие как AngularJS, KnockoutJS, Ember.js и другие, работать внутри Windows Store JavaScript приложения, но столкнулись с непониманием рантайма в лице ошибки ниже.69ed995aa650484e937cdf8e60304b18.png

Это такая фича, которая запрещает динамически модифицировать HTML/DOM контент, используя некоторые методы, делая приложения более секьюрными, но при этом делает невозможным использование более или менее сложных веб-фреймворков, которые активно используют такие фичи (например, innerHTML).

Решение естьПрошу любить и жаловать — JavaScript Dynamic Content shim for Windows Store apps, специальная JS библиотека от Microsoft Open Technologies, которую достаточно включить в html файл.Пример для AngularJS 3228ea2daed24f3e84e9da84def0d135.png1. Создаем Windows Store JavaScript приложение

32e0468bda2048b4afbbc333425baeb0.png

2. Добавляем тестовое AngularJS приложение

Скачиваем исходный код github.com/ccoenraets/angular-directory. Читаем описание приложения, если нужно/интересно.

Переносим папку client как есть в только что созданное Windows Store приложение (Show All Files → Include In Project).

f1be163a275440a8abb469037f3c346e.png

3. Добавляем winstore-jscompat.jsВыкачиваем и добавляем winstore-jscompat.js в свой проект.

0e5bac7146f9473d91bcc6b5cc88d489.png

Не забываем включить библиотеку в client/index.html:

b68afc28f84943a1bb167825be2efa6d.png

4. Выставляемый client/index.html в качестве стартовой страницы и запускаем

099a134138af4b56b36693ddac1ed566.png

ad3f14f63f4f40a59062855f7a37355e.png

5. Финальный штрих

Видно, что приложение работает, но картинки не подгружаются. Это специальная логика AngularJS, которая помечает специфичный для Windows Store App ms-appx:// протокол как unsafe.

0148d77f40af4b349657ccf4ed337d20.png

Чиним в client/js/app.js:

3416f0addf06418bbeaae128cce18fef.png6. В итоге

17a8e08d52da4c3fbe23e06bf6494f1a.png

© Habrahabr.ru