jQuery Mobile呈现页面初始化后添加内容的问题
我正在为项目使用jQuery Mobile和Backbone JS。这主要是工作,使用jQuery Mobile的事件'pagebeforeshow'来触发正确的骨干视图。在特定的jQuery Mobile页面的Backbone View中,这就是它在做所有需要的动态事物的地方。视图所做的一些事情是使用Underscore的模板系统吸引特定的位。jQuery Mobile呈现页面初始化后添加内容的问题
这一切都很棒,直到我使用模板系统拉动表单位。例如,一组动态单选按钮(由Backbone Collection生成)。这些单选按钮我想使用jQuery Mobile提供的功能进行设计。目前,jQuery Mobile没有采用这些动态注入的单选按钮。我之前通过再次调用jQuery Mobile小部件“slider()”方法执行滑块时解决了此问题,并且它似乎刷新了它们......这似乎并不适用于这些单选按钮。
中的骨干视图,我试图再次调用控件的方法:
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
我尝试过其他的方式太绕,但它似乎我需要做的是这样的分组造型工作等但这看起来不正确! ...当我单击单选按钮时,这样做也会导致错误,并说:“在初始化之前无法在checkboxradio上调用方法;试图调用方法'refresh'”?
似乎应该有一种方法在jQuery Mobile中重新初始化页面或其他东西?我注意到源代码中有一个'页面'小部件。
jQuery Mobile如何处理在页面生成后被注入到DOM中的表单/元素?处理它如何构成表单有没有一种干净的方式?必须有一种干净的方式来调用表单来呈现“jQuery Mobile方式”,而不仅仅依赖基本HTML中的数据属性标记?
任何帮助或深入了解这个问题将不胜感激...我非常想尝试让Backbone JS和jQuery Mobile良好地协作。
非常感谢,詹姆斯
更新
由于jQueryMobileβ2有做这个的事件。 .trigger('create')
上的一个元素可以使其内部的所有内容都被正确地绘制。
的另一个问题,是不是重复,而是需要一个answet我贴过10次:)
[老答案]
尝试在我的常见问题.page()
我不确定这是否有帮助,但添加动态元素时,我在成功ajax调用本身中使用.page()(例如here和here),但我发现它没有按预期工作。我发现,在Ajax调用它更好地刷新元素(如果它是一个表单元素)使用these documented methods:
-
复选框:
$("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");
和用于添加非表格元件使用。第()
我需要一种在初始化之后动态刷新JQM页面的方法。我发现,如果我在“页面隐藏”事件中删除了数据属性“页面”,则下一次显示JQM页面时会重新初始化它。
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});
不错的把戏。我希望这是不存在的,因为创建事件存在,但仍然很高兴知道在数据中有'页面'键 – naugtur 2012-10-13 08:42:31
刷新整个页面为我工作:
$('#pageId').page('destroy').page();
该解决方案与JQMbeta2不同。请删除。 – naugtur 2012-10-13 08:37:57
jQuery Mobile的现在支持.trigger( “创建”);这将为您解决这个问题
$('#pageId').page('destroy').page();
适用于生成的整个控制组,更不用说无线电输入子节点。
-Mike
此答案自JQMbeta2以来不正确。请删除 – naugtur 2012-10-13 08:39:52
对我来说只有.page()
工作(不.page('destroy')
)。
例如为:
$('my-control-group-id').page();
阿姆农
自JQMbeta2以来,此解决方案不正确。请删除。 – naugtur 2012-10-13 08:41:16
尝试用新的内容元素上调用.trigger( “创建”)。
为我工作,谢谢! – 2013-03-18 13:24:44
我有点偏离主题。无论如何,我希望能够阻止jqm在init中创建第一个默认页面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;
});
到目前为止骨干和JQM一直工作正常。
当我在封闭div元素上调用.trigger('create')时,它对我有用。见下面的例子:
在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');
尝试使用enhanceWithin()方法。这应该是使用jQuery Mobile时任何jQuery对象的方法。
谢谢。我遵循你的话。在这种特殊情况下,我不得不使用$(element).page(“destroy”)。page()出于某种原因?但即使这样也不行。它正确地呈现了内容,但它不正确。获得相同的错误:“在初始化之前无法在checkboxradio上调用方法;尝试调用方法'refresh'”......奇怪。 – littlejim84 2011-04-14 10:28:56
'.page'可以在元素上调用一次。你必须围绕你动态添加的内容创建一个包装div。 – naugtur 2011-04-14 11:04:22
呃,那是stoopid。所以如果我有一个100%的Ajax页面,我想重新加载我的选项,我必须每次创建一个包装元素!必须是更好的方法。 – 2011-06-06 23:52:27