JavaScript Dynamic Content shim для Windows JavaScript Apps

Посвящается разработчикам, которые пытались заставить популярные веб-фрейморки, такие как AngularJS ^[1], KnockoutJS ^[2], Ember.js ^[3] и другие, работать внутри Windows Store JavaScript ^[4] приложения, но столкнулись с непониманием рантайма в лице ошибки ниже.

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

Решение есть

Прошу любить и жаловать — JavaScript Dynamic Content shim for Windows Store apps ^[6], специальная JS библиотека от Microsoft Open Technologies ^[7], которую достаточно включить в html файл.

Пример для AngularJS

1. Создаем Windows Store JavaScript приложение

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

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

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

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

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

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

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

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

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

6. В итоге

Автор: sgrebnov

Источник ^[11]