初始化页面后添加内容的jQuery Mobile渲染问题

如何解决初始化页面后添加内容的jQuery Mobile渲染问题

|| 我正在将jQuery Mobile和Backbone JS用于一个项目。使用jQuery Mobile的事件'pagebeforeshow \'触发正确的Backbone View，它通常可以正常工作。在该特定jQuery Mobile页面的“骨干视图”中，该页面将执行所有需要的动态操作。视图所做的某些事情是使用Underscore的模板系统将某些位插入。在使用模板系统提取表单位之前，一切都很好。例如，一组动态单选按钮（由“骨干集合”生成）。我想使用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中应该有一种方法可以重新初始化页面或其他内容？我注意到源代码中有一个\'page \'小部件。制作页面后，jQuery Mobile如何处理被注入到DOM中的表单/元素？有没有一种干净的方法来处理它如何构成表格？必须有一种干净的方法来调用表单以呈现“ jQuery Mobile方式”，而不仅仅是依靠基本HTML中的数据属性标签？对于这个问题的任何帮助或见解将不胜感激...我非常努力地尝试使Backbone JS和jQuery Mobile能够很好地协同工作。非常感谢，詹姆斯

解决方法

更新从jQueryMobile beta2开始，有一个事件可以做到这一点。元素上的ѭ1可使元素内的所有内容正确绘制。另一个不是重复的问题，但我需要回答超过10次：) [旧答案] 试试.page() 我的常见问题详情： http://jquerymobiledictionary.pl/faq.html ,刷新整个页面对我有用：

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

,我不确定这是否有帮助，但是在添加动态元素时，我在成功ajax调用本身中使用了.page（）（这里和这里的示例），但是我发现它没有按预期工作。我发现在ajax调用中，最好刷新该元素（如果它是一个form元素）以使用以下记录的方法：复选框：

$(\"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（） ,JQuery Mobile现在支持.trigger（\“ create \”）;它将为您解决这个问题 ,尝试在具有新内容的元素上调用.trigger（\“ create \”）。 ,我需要一种在初始化JQM页面后动态刷新的方法。我发现，如果在\“ pagehide \”事件期间删除了数据属性\“ page \”，则下次显示JQM页面时，它将重新初始化。

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

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

适用于生成的整个控制组，更不用说无线电输入子级了。 -麦克风 ,当我在封闭的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\');

,对我而言，只有.page()有效（没有.page(\'destroy\')）。例如。：

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

安农 ,我有点话题。我希望能够阻止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;
});

到目前为止，Backbone和JQM工作正常。 ,尝试使用EnhanceWithin（）方法。这应该是使用jQuery Mobile时任何jQuery对象的方法。

初始化页面后添加内容的jQuery Mobile渲染问题

如何解决初始化页面后添加内容的jQuery Mobile渲染问题

解决方法

相关推荐