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

Question

Я использую jQuery Mobile и Backbone JS для проекта. В основном это работает, используя событие jQuery Mobile 'pagebeforeshow' для запуска правильного просмотра Backbone. В представлении Backbone для этой конкретной страницы 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 должен быть способ повторно инициализировать страницу или что-то в этом роде ?! Я заметил, что в исходном коде есть виджет 'page'.

Как 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

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

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

Answer 3

Я не уверен, помогает ли это, но при добавлении динамических элементов я использовал .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 4

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

Answer 5

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

Answer 6

Это сработало для меня, когда я позвонил .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 7

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

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

-Mike

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 страницы по умолчанию для init, так как магистраль в любом случае оборачивает элементы в 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 работают нормально.