页面初始化后添加内容的 jQuery Mobile 呈现问题 [英] jQuery Mobile rendering problems with content being added after the page is initialized

问题描述

我在一个项目中使用 jQuery Mobile 和 Backbone JS.它主要工作，使用jQuery Mobile 的事件'pagebeforeshow' 来触发正确的主干视图.在该特定 jQuery Mobile 页面的主干视图中，它正在执行所有需要的动态操作.视图所做的一些事情是使用 Underscore 的模板系统提取某些位.

I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.

这一切都很好，直到我使用模板系统拉取表单位.例如，一组动态单选按钮(由 Backbone Collection 生成).这些单选按钮我想使用 jQuery Mobile 提供的样式来设计.目前，jQuery Mobile 没有选择这些动态注入的单选按钮.我以前在做滑块时通过再次调用 jQuery Mobile 小部件slider()"方法解决了这个问题，它似乎刷新了它们......这些单选按钮似乎不是这种情况.

This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.

在主干视图中，我再次尝试调用小部件方法:

In the Backbone View, I tried calling the widget methods again:

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

我也尝试了其他方式，但似乎我需要这样做才能使分组样式工作等.但这似乎不对！...当我点击单选按钮时，这样做也会导致错误，说:在初始化之前无法调用 checkboxradio 上的方法；试图调用方法‘刷新’"?

I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?

似乎 jQuery Mobile 中应该有一种方法可以重新初始化页面之类的?！我注意到源代码中有一个页面"小部件.

It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.

jQuery Mobile 如何处理在页面创建后注入 DOM 的表单/元素?是否有一种干净的方式来处理它如何构成表单?必须有一种干净的方式来调用表单来呈现jQuery Mobile 方式"，而不仅仅是依赖于基本 HTML 中的数据属性标签?

How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?

对这个问题的任何帮助或见解将不胜感激...我非常致力于让 Backbone JS 和 jQuery Mobile 很好地协同工作.

Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.

非常感谢，詹姆斯

推荐答案

更新

自 jQueryMobile beta2 以来，有一个事件可以做到这一点..trigger('create') 使元素内部的所有内容都正确绘制.

Since jQueryMobile beta2 there is an event to do this. .trigger('create') on an element to cause everything inside it to be painted correctly.

另一个不是重复的问题，但需要我发布超过 10 次的答案:)

Another question that is not a duplicate, but requires an answet I posted over 10 times :)

[旧答案]

试试.page()

我的常见问题解答中有更多详细信息:http://jquerymobiledictionary.pl/faq.html

More details in my faq: http://jquerymobiledictionary.pl/faq.html

这篇关于页面初始化后添加内容的 jQuery Mobile 呈现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！