Question

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

这一切都很棒，直到我使用模板系统拉出表格位。例如，一组动态单选按钮（从Backbone Collection生成）。这些单选按钮我希望使用jQuery Mobile提供的样式。目前，jQuery Mobile没有采用这些动态注入的单选按钮。我之前通过再次调用jQuery Mobile小部件“slider（）”方法来执行滑块时解决了这个问题，它似乎刷新了它们......这似乎不是这些单选按钮的情况。

在Backbone View中，我尝试再次调用widget方法：

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

我也尝试过相反的方式，但似乎我需要这样做，以便分组样式工作等等。但这似乎不对！ ...当我点击单选按钮时，这样做也会导致错误，说：“在初始化之前无法调用checkboxradio上的方法;尝试调用方法'刷新'”？

似乎应该有一种方法在jQuery Mobile中重新初始化页面或其他东西？！我注意到源代码中有一个“页面”小部件。

在页面制作完成后，jQuery Mobile如何处理注入DOM的表单/元素？是否有一种干净的方式来处理它如何构成表格？必须有一种干净的方式来调用表单来呈现“jQuery Mobile方式”而不依赖于基本HTML中的数据属性标记吗？

非常感谢对这个问题的任何帮助或见解......我非常喜欢尝试让Backbone JS和jQuery Mobile很好地协同工作。

非常感谢，詹姆斯

Answer 1

<强>更新

由于jQueryMobile beta2有一个事件可以执行此操作。 .trigger('create')在元素上使其中的所有内容都被正确绘制。

另一个不重复的问题，但需要我发布10次以上的答案：）

[旧答案]

尝试.page()

我的常见问题解答中的更多细节： http://jquerymobiledictionary.pl/faq.html

Answer 2

我不确定这是否有帮助但是在添加动态元素时我在sucess ajax调用本身（例如here和here）中使用.page（）但是我发现它不是按预期工作。我发现在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");

并且要添加非表单元素，请使用.page（）

Answer 3

刷新整个页面对我有用：

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

Answer 4

JQuery Mobile现在支持.trigger（“create”）;这将为你解决这个问题

Answer 5

尝试使用新内容在元素上调用.trigger（“create”）。

Answer 6

我需要一种在初始化后动态刷新JQM页面的方法。我发现如果在“pagehide”事件期间删除了数据属性“page”，则下次显示JQM页面时会重新初始化。

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

Answer 7

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

适用于生成的整个控制组，更不用说无线电输入子节点了。

-Mike

Answer 8

当我在封闭的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');

Answer 9

仅限我.page()工作（没有.page('destroy')）。

E.g：

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

暗嫩

Answer 10

我有点偏离主题。我希望能够阻止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一直运作良好。

Answer 11

尝试使用 enhanceWithin（）方法。这应该是使用jQuery Mobile时任何jQuery对象的方法。

jQuery Mobile在初始化页面后添加内容时出现问题

11 个答案: