jquery-mobile - 静态标题中的 jQuery Mobile 面板

Question

假设我在 JQM 面板中有一个相当复杂的菜单，我需要它可以从应用程序中的每个页面访问。实现它的一种方法是简单地将面板代码复制并粘贴到每个子页面。

Approach 1 - The brutal way

这行得通。但是，它只适用于具有简单面板的小型应用程序。复制大量 Panel 代码并应用到所有其他页面可能会非常麻烦，并且当更多页面稍后加载到 DOM 时肯定会遇到性能问题。

所以我尝试了另一种方式 - 自己操作面板。我点击了 pagecreate 事件并将面板添加到加载的页面中。这样我就可以保持我的 DOM 干净并且始终处理一个面板。

Approach 2 - The wishful way

但这没有用。在我将面板从一个页面完全移动到另一个页面并调用 pageContainer.trigger('refresh') 或 pageContainer.trigger('create' ).

所以我最终这样做了 - 将面板 html 保留在 js 变量中，然后将面板 html 预先添加到加载的页面中，而不删除前一页上的面板。这似乎有效。

Approach 3 - The compromise way

虽然这种方法并不能真正解决 DOM 中只有一个面板的问题，但至少我不必将它复制粘贴到每个页面中。

现在它可以工作了，但我对它并不是很满意。我在这里发布这个问题，希望有人能解释为什么方法 2 不起作用，这真的会让我很开心。

** 我的应用正在使用多页模板

干杯

Answer 1

我在面板中使用一个 ListView ，每个页面都有一个唯一的 ID。通过 onpagecreate 事件，我使用 javascript 中的数据填充 ListView 。

查看我的博客以获取工作示例 http://teusink.blogspot.nl/2013/04/android-example-app-with-phonegap-and.html?m=1