jQuery Mobile: просмотр списка (обновление) для тегов div?

Question

Я довольно новичок с jQuery mobile (и JS :)), извините, если я говорю что-то, что выглядит слишком просто. Я два дня искал в интернете и не нашел решения.

Я хочу знать, есть ли какая-нибудь функция, которая делает то же самое, что $ (# someList) .listview ('refresh'), но для тегов div. У меня есть два тега div, и когда я динамически изменяю их содержимое, они теряют стиль.

Код:

function muestraFicha() {
    var categoriaFicha = "Ciencia / Matemáticas";
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?";
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo";
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>"

    $("#fichaRespuesta").empty(); //vaciamos la ficha
    $("#fichaRespuesta").append("<h4> Respuesta </h4>");
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

    $("#fichaPregunta").empty();
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");
}

Итак, в конце функции мне нужно что-то .listview ('refresh') или html стилизуется только при первом вызове функции.

Дивы, которые теряют стиль - это fichaRespuesta и fichaPregunta.

Спасибо.

Answer 1

Если вы хотите использовать jQuery Mobile в качестве любого нового элемента DOM, вы можете использовать функцию .trigger('create');:

Новое событие «создать»: легко улучшить все виджеты одновременно

Хотя плагин страницы больше не вызывает каждый плагин специально, он отправляет событие «pagecreate», которое большинство виджетов использует для автоинициализировать себя. Пока сценарий плагина виджета ссылка на него будет автоматически улучшать любые экземпляры виджетов он находит на странице, как и раньше. Например, если выбрано плагин загружен, он улучшит любые выборки, найденные в новом Созданная страница.

Эта структура теперь позволяет нам добавлять новое событие создания, которое может быть срабатывает на любом элементе, избавляя вас от задачи ручной инициализации каждый плагин содержится в этом элементе. До сих пор, если разработчик загружаются в контент через Ajax или динамически генерируемую разметку, они необходимо вручную инициализировать все содержащиеся плагины (кнопка просмотра списка, выберите и т. д.), чтобы улучшить виджеты в разметке.

Теперь наше удобное событие create инициализирует все необходимые плагины. внутри этой разметки, так же, как улучшение создания страницы процесс работает. Если бы вы использовали Ajax для загрузки в блоке HTML Разметка (скажем, форма входа), вы можете инициировать создание автоматически преобразовать все виджеты, которые он содержит (входы и кнопки в этом случай) в расширенные версии. Код для этого сценария будет:

$ (... новая разметка, содержащая виджеты ...) .appendTo (".ui-page" ) .trigger ("создать");

Создание против обновления: важное различие

Обратите внимание, что между событием создания есть важное различие и обновить метод, который есть у некоторых виджетов. Создать событие подходит для улучшения необработанной разметки, содержащей один или несколько виджетов. метод обновления, который есть у некоторых виджетов, должен использоваться на существующих (уже улучшенные) виджеты, которыми манипулировали программно и нужно обновить пользовательский интерфейс, чтобы соответствовать.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список с атрибутом data-role = listview после создания страницы, запуск create для родительского элемента этого списка преобразует его в виджет в стиле списка. Если бы больше пунктов списка было тогда программно добавлено, вызов метода обновления списка обновить только эти новые элементы списка до расширенного состояния и оставить существующие элементы списка нетронутыми.

Ссылка на вышеуказанную информацию: http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Также я заметил, что вы используете одни и те же селекторы последовательно, вы можете значительно улучшить производительность вашего кода, объединяя вызовы селекторов, например, так:

Изменение:

$("#fichaRespuesta").empty(); //vaciamos la ficha
$("#fichaRespuesta").append("<h4> Respuesta </h4>");
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty();
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>");
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>");

Кому:

$("#fichaRespuesta").empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

$("#fichaPregunta").empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");

Обратите внимание, что я удалил один из вызовов .append(), так как он создает дополнительные издержки для вызова его дважды подряд; вместо этого я помещаю HTML-код для обоих вызовов .append() в один вызов.

Если вы действительно хотите повысить производительность своего кода, кэшируйте селекторы, чтобы их можно было просматривать только один раз, например:

var $fichaRespuesta = $('#fichaRespuesta'),
    $fichaPregunta  = $('#fichaPregunta');
function muestraFicha() {
    /*I removed your extra code to make this easier to read*/

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>");

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");