JQuery Проблемы с мобильным переносом с добавлением контента после инициализации страницы

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

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

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

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

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

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

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

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

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

Ответ 1

Обновление

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

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

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

попробуйте .page()

Подробнее в моем ответе: http://jquerymobiledictionary.pl/faq.html

Ответ 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()

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

работает для целых групп управления, которые генерируются, а тем более для детей с радиовходом.

-Mike

Ответ 8

Он работал у меня, когда я вызывал .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');

Ответ 9

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

например:.

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

Амнон

Ответ 10

Мне немного не нравится. Я хотел иметь возможность остановить jqm от создания первой дефолтной страницы по умолчанию для 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 работали нормально.

Ответ 11

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