Проблемы с рендерингом jQuery Mobile с контентом, добавляемым после инициализации страницы

Question

Я использую jQuery Mobile и Backbone JS для проекта. В основном это работает, используя событие jQuery Mobile'pagebeforeshow', чтобы вызвать правильный просмотр Backbone. В Backbone View для этой конкретной страницы jQuery Mobile она выполняет все необходимые динамические функции. Некоторые вещи, которые делают представления, - это извлечение определенных битов с использованием системы шаблонов Underscore.

Это все замечательно до тех пор, пока я не потяну кусочки формы, используя систему шаблонов. Например, набор динамических переключателей (которые генерируются из коллекции Backbone). Эти радиокнопки я хочу оформить, используя то, что предлагает jQuery Mobile. В настоящий момент jQuery Mobile не принимает эти динамически внедренные переключатели. Я решил эту проблему ранее, когда выполнял ползунки, просто снова вызвав метод "slider()" виджета jQuery Mobile, и, похоже, он их обновил... Это не относится к этим переключателям.

В Backbone View я снова попытался вызвать методы виджета:

$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();

Я попробовал их и наоборот, но мне показалось, что мне нужно сделать это таким образом, чтобы стиль группирования работал и т. Д. Но это просто кажется неправильным!... выполнение этого также вызывало ошибки, когда я нажимал на переключатели, говоря: "не удается вызвать методы на checkboxradio до инициализации; попытался вызвать метод" обновить ""?

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

Как jQuery Mobile обрабатывает формы / элементы, внедряемые в DOM после создания страницы? Есть ли чистый способ обработки, как она составляет формы? Должен быть чистый способ вызова форм для рендеринга "способа jQuery Mobile" без использования только тегов атрибутов данных в базовом HTML?

Любая помощь или понимание этой проблемы будет принята с благодарностью... Я очень заинтересован в том, чтобы попытаться заставить Backbone JS и jQuery Mobile хорошо работать вместе.

Большое спасибо, Джеймс

Answer 1

Обновить

Начиная с jQueryMobile beta2, есть событие, чтобы сделать это. .trigger('create') на элемент, чтобы заставить все внутри него быть окрашены правильно.

Еще один вопрос, который не является дубликатом, но требует ответа, который я выложил более 10 раз:)

[старый ответ]

пытаться .page()

Больше подробностей в моем FAQ: http://jquerymobiledictionary.pl/faq.html

Answer 2

Я не уверен, помогает ли это, но при добавлении динамических элементов я использовал.page() в самом вызове ajax sucess (пример здесь и здесь), но обнаружил, что он не работает должным образом. Я обнаружил, что в вызове ajax лучше обновить элемент (если это элемент формы), чтобы использовать эти документированные методы:

• Флажки:

  $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
  

• Радио:

  $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
  

• Выбор:

  var myselect = $("select#foo");
  myselect[0].selectedIndex = 3;
  myselect.selectmenu("refresh");
  

• Ползунки:

  $("input[type=range]").val(60).slider("refresh");
  

• Флип-переключатели (они используют слайдер):

  var myswitch = $("select#bar");
  myswitch[0].selectedIndex = 1;
  myswitch .slider("refresh");
  

и для добавления неформального элемента используйте.page()

Answer 3

Обновление всей страницы работало для меня:

$('#pageId').page('destroy').page();

Answer 4

Попробуйте вызвать.trigger("create") для элемента с новым содержимым.

Answer 5

JQuery Mobile теперь поддерживает.trigger("create"); который решит это для вас

Answer 6

$('#pageId').page('destroy').page(); 

работает для целых создаваемых контрольных групп, не говоря уже о дочерних радиоприемниках.

-Майк

Answer 7

Это сработало для меня, когда я позвонил.trigger('create') в элемент div. Смотрите пример ниже:

В файле.html:

<div id="status-list" data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose as many snacks as you'd like:</legend>
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
            <label for="checkbox-1a">Cheetos</label>
    </fieldset>
</div>

в файле.js:

$("#status-list").trigger('create');

Answer 8

Мне нужен был способ динамического обновления страницы JQM после ее инициализации. Я обнаружил, что если я удалил атрибут данных "page" во время события "pagehide", то при следующем отображении страницы JQM она была повторно инициализирована.

$('#testing').live('pagehide', function (e) {
    $.removeData(e.target, 'page');
}); 

Answer 9

Попробуйте использовать метод EnhiftWithin(). Это должен быть метод любого объекта jQuery при использовании jQuery Mobile.

Answer 10

Я немного не по теме. Я хотел, чтобы jqm не мог создавать первый div страницы по умолчанию при инициализации, так как магистраль в любом случае оборачивает элементы в div. Я хотел динамически вставлять страницы в DOM, а затем вызывать jqm для создания его классов и виджетов. Я наконец сделал это так:

 <head>
 <script src="jquery-1.8.3.js"></script>
 <script type='javascript'>
 $(document).on("mobileinit", function () {  
 $.mobile.autoInitializePage = false;       
 }
 </script>
 <script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
 </head>
 <body>
 ....... dynamically add your content ..........

 <script type='javascript'>
 $.mobile.initializePage() 
 </script>
 </body>

и мой конфиг jqm дыры (который вы поставили перед jqm.js)

$(document).on("mobileinit", function () {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
  $.mobile.changePage.defaults.changeHash = false;

  $.mobile.defaultDialogTransition = "none";
  $.mobile.defaultPageTransition = "slidedown";
  $.mobile.page.prototype.options.degradeInputs.date = true;
  $.mobile.page.prototype.options.domCache = false;
  $.mobile.autoInitializePage = false;

  $.mobile.ignoreContentEnabled=true;
}); 

Пока что Backbone и JQM работают нормально.

Answer 11

Только для меня .page() работал (без .page('destroy')).

Например:

$('my-control-group-id').page();

Амнон