Мобильные проблемы jQuery с автономным веб-приложением

Я разрабатываю приложение с использованием мобильного jQuery, которое будет использовать автономные возможности HTML5 (манифест кеша и т. д.).

Базовая программа предназначена для технических специалистов на местах, чтобы просматривать/изменять свои заказы на планшете без подключения к Интернету. Я использую локальную базу данных браузера для хранения заказов.

У меня есть страница orders.html, на которой можно просмотреть любой заказ, но чтобы передать ей параметр, я не могу использовать параметры GET, потому что программа отключена, и я не могу перечислить каждый заказ в манифесте.

Поэтому я должен использовать хеш-параметры, например orders.html#o4572. Но jQuery mobile не очень хорошо работает с этой схемой — он использует хеш-параметры для своих собственных схем. Когда я нахожусь на list.html и есть ссылка на orders.html#o4572 - она ​​превращает ссылку в list.html#o4752 и остается на той же странице.

Я могу отключить обработку ссылок jQuery mobile, установив $.mobile.linkBindingEnabled = false;, но это предотвратит всю навигацию ajax — вы потеряете приятные переходы, а всплывающие диалоги больше не «просто работают», вам нужно делать их вручную. А могут быть и другие проблемы.

Это единственный способ заставить это работать правильно? Я только начинаю использовать jQuery для мобильных устройств, поэтому мне кажется, что я что-то упускаю.


person ScottR    schedule 20.09.2012    source источник
comment
Проверьте это: github.com/azicchetti/jquerymobile-router. Рекомендовано командой JQM. Спас меня.   -  person Jon Wells    schedule 20.09.2012
comment
Я видел это, но похоже, что для этого требуется однофайловая система, где нет order.html и list.html, а есть один app.html. Это приложение в конечном итоге будет довольно большим - DOM будет слишком большим, если все это будет в одном файле. Больше боли обслуживания тоже.   -  person ScottR    schedule 20.09.2012
comment
Да шахты СПА. но он позволяет вам передавать параметры без простого кэширования URL-адреса в первый раз. Я думаю, что динамическая настройка маршрутизатора тоже может быть проблемой.   -  person Jon Wells    schedule 21.09.2012
comment
@CrimsonChin На самом деле я остановился на этом, потому что проблемы с DOM можно смягчить. Если вы хотите сделать это ответом, я дам его вам.   -  person ScottR    schedule 28.09.2012


Ответы (2)


Я сделал что-то подобное, используя плагин jquery-mobile-router с одностраничным приложением, которое имеет автономный режим, однако он должен работать так же для многостраничного приложения, поскольку с многостраничным приложением поведение JQM по умолчанию (ajax-enabled установлено на true) заключается в том, что он извлекает вторую страницу и прикрепляет ее к DOM текущей страницы.

Используя маршрутизатор JQM, вы сможете сделать что-то вроде этого.

var router;

var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
  var params = router.getParams(matchObj[1]);
  //use your params to pull data from localStorage  
};

router =  new $.mobile.Router({
     'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
     , {orderHandler: orderHandlerRoute }
   }); 
person Jack    schedule 20.09.2012
comment
Я пробовал это, но я получаю ошибки javascript при переходе по ссылкам на другую страницу (например, на login.html, переходя на orders.html). Отслеживая код, он по-прежнему выглядит как проблемы jQuery для мобильных устройств с преобразованием ссылок на orders.html#orders?o=4572 в login.html#orders?o=4572. Диалоги тоже не работают. - person ScottR; 21.09.2012
comment
Я не уверен, что точно понимаю, как вы ссылаетесь с одной страницы на другую (это должно быть что-то вроде orders.html?o=4572), но вам вообще не следует использовать хэш. Если вы пытаетесь получить доступ к определенной странице на другой странице, вы должны понимать, что JQM не разрешает этого. - person Jack; 22.09.2012
comment
Мне нужно использовать хеш-параметры, потому что манифест кеша требует, чтобы все страницы были предварительно объявлены. Наличие динамических параметров GET в ссылках сделало бы это невозможным. Я пытался различными способами связать параметры с другой страницей, но не смог заставить ее работать. - person ScottR; 22.09.2012
comment
В итоге я использовал плагин маршрутизатора, но в конфигурации с одной страницей для поддержки хэш-параметров, поэтому я дам вам ответ, потому что он ближе всего. - person ScottR; 02.10.2012

Вы действительно не должны использовать хеш-параметры ни для чего другого, кроме как для выбора страниц при использовании jquery mobile.
Стандартный способ действий — передать параметр с помощью file.html?parameter=value и получить значение с помощью javascript.
Затем вы можете обработать это значение. с функцией js, которая может, например, получить данные с помощью вызова ajax, если вы находитесь в сети, или прочитать их из локального хранилища, если вы не в сети. Это можно сделать либо путем привязки события changepage, если вы хотите динамически генерировать свои страницы на основе данных, связанных с параметром, либо путем привязки события pageinit, если вы хотите изменить страницу после ее отображения (например, заполнить элементы формы)

В качестве альтернативы, если использование манифеста кеша не позволяет вам использовать синтаксис ?parameter=value, вы можете использовать следующий подход: - напишите целевую ссылку как file.html#pagename_itemvalue - привяжите событие смены страницы, чтобы переопределить поведение по умолчанию, и вместо этого проанализируйте целевое значение, извлеките pagename и itemvalue и создайте/получите доступ к содержимому, которое хотите отобразить. Пример этого можно увидеть на этой странице.

person Romain    schedule 20.09.2012
comment
Как я уже упоминал в вопросе, я не могу использовать параметры страницы, как вы упомянули, из-за того, что это автономное приложение. Мне нужно поместить все возможные страницы в манифест кеша. - person ScottR; 20.09.2012
comment
Автономный режим не препятствует доступу к параметрам. Например, это будет работать в автономном режиме. - person Romain; 20.09.2012
comment
Да, но манифест кэша HTML 5 требует, чтобы каждая страница, используемая в автономном режиме, находилась в нем. file.html?parameter=value — это страница, отличная от file.html, но file.html и file.html#o4572 — это одна и та же страница согласно манифесту. - person ScottR; 20.09.2012
comment
Спасибо, стало понятнее, я добавил подход, позволяющий преодолеть это ограничение. - person Romain; 20.09.2012
comment
Хм, для этого потребовалось бы динамическое создание каждой страницы в приложении (будет намного больше страниц, и все с большим количеством параметров). Это сработает, но я не уверен, что это лучше, чем просто отключить поведение ссылки по умолчанию. - person ScottR; 20.09.2012
comment
На самом деле, как только у вас есть имя страницы и значение элемента в событии changepage, вы можете перейти на страницу имени страницы и использовать значение элемента, чтобы делать с ним все, что хотите, точно так же, как если бы у вас было ?parameter=value - person Romain; 20.09.2012