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

发布于 2024-11-01 02:04:07 字数 990 浏览 3 评论 0原文

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

这一切都很棒，直到我使用模板系统拉入表单位。例如，一组动态单选按钮（从 Backbone Collection 生成）。我想使用 jQuery Mobile 提供的功能来设计这些单选按钮的样式。目前，jQuery Mobile 并未采用这些动态注入的单选按钮。我之前在做滑块时通过再次调用 jQuery Mobile 小部件“slider()”方法解决了这个问题，它似乎刷新了它们......这些单选按钮似乎并非如此。

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

$(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 很好地协同工作。

非常感谢，詹姆斯

原文

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.

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();

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'"?

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.

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?

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.

Many thanks, James

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

装迷糊 2024-11-08 02:04:07

更新

自 jQueryMobile beta2 以来，有一个事件可以执行此操作。元素上的 .trigger('create') 可以正确绘制其中的所有内容。

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

[旧答案]

尝试 .page()

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

回复收藏 0 原文

南汐寒笙箫 2024-11-08 02:04:07

刷新整个页面对我有用：

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

Refreshing the whole page worked for me:

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

回复收藏 0 原文

兔姬 2024-11-08 02:04:07

我不确定这是否有帮助，但是当添加动态元素时，我在成功的 ajax 调用本身中使用 .page() （示例此处和此处），但我发现它没有按预期工作。我发现在ajax调用中最好刷新元素（如果它是表单元素）以使用这些记录的方法：

复选框：

$("input[type='checkbox']").attr("已选中",true).checkboxradio("刷新");

收音机：

$("input[type='radio']").attr("已选中",true).checkboxradio("刷新");

选择：

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("刷新");

滑块：

$("input[type=range]").val(60).slider("刷新");

翻转开关（它们使用滑块）：

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("刷新");

要添加非表单元素，请使用 .page()

I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:

Checkboxes:

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

Radios:

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

Selects:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Sliders:

$("input[type=range]").val(60).slider("refresh");

Flip switches (they use slider):

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

and for adding a non-form element use .page()

回复收藏 0 原文

苏别ゝ 2024-11-08 02:04:07

JQuery Mobile 现在支持 .trigger("create");这将为您解决这个问题

回复收藏 0 原文

无所的.畏惧 2024-11-08 02:04:07

尝试在包含新内容的元素上调用 .trigger("create") 。

回复收藏 0 原文

早茶月光 2024-11-08 02:04:07

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

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

I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.

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

回复收藏 0 原文

太傻旳人生 2024-11-08 02:04:07

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

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

-麦克风

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

works for entire control groups that are generated, let alone radio input children.

-Mike

回复收藏 0 原文

海螺姑娘 2024-11-08 02:04:07

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

It worked for me when I called .trigger('create') on the enclosing div element. See example below:

In .html file:

<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>

in .js file:

$("#status-list").trigger('create');

回复收藏 0 原文

梦在深巷 2024-11-08 02:04:07

对我来说，只有 .page() 有效（没有 .page('destroy')）。

例如：

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

阿姆农

For me only .page() worked (without the .page('destroy')).

E.g.:

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

Amnon

回复收藏 0 原文

回心转意 2024-11-08 02:04:07

我有点偏离主题了。我希望能够阻止 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 工作正常。

I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this:

 <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>

and my hole jqm config (which you put before 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;
});

So far Backbone and JQM been working fine.

回复收藏 0 原文