Question

我正在创建一个基于jquery mobile的社交网站。页面使用AJAX动态加载并缓存在DOM中（jQM管理它）。我在网站上有一个聊天系统：当用户点击联系人列表页面上的名字（/ chat /）时，会显示一个包含所选联系人的会话历史记录的页面（/ char / msg /？u = user_name）。

问题：当用户在同一页面与多个（n个）用户聊天时，会加载对话页面的n个实例并将其存储在DOM上（/ chat / msg /？u = user_1，/ chat / msg /？u = user_2，...，/ chat / msg /？u = user_n）。对话页面上的元素ID将不可避免地发生冲突，这将破坏聊天功能。

我应该如何管理对话页面以避免ID冲突？当切换到一个时，销毁所有其他会话页面不是一个选项 - 我想支持对话之间的快速切换。我注意到GMail和Facebook在这种情况下分配了随机唯一ID，但这是最好的做法吗？有没有我可以使用的模式？有没有更简单的解决方案？

谢谢。

Answer 1

通过$ .mobile.activePage引用当前页面，任何选择器都应该从当前页面搜索为根，例如$ .mobile.activePage.find（ '＃myElement'）

您还需要确保正确使用pageinit / pageshow正确绑定on个侦听器 - 在这种情况下，您也可以引用当前页面。

修改以为我会添加它以防万一：https://stackoverflow.com/a/9085014/737023 这就是我设法处理多个页面和id冲突的方式，我假设你也使用DOM caching = true？我从来没有与之合作过，但不应该有任何新问题。

Answer 2

这在习惯jQuery Mobile时是一个常见问题。解决方案是，如果您发现自己在多个伪页面上使用相同的ID，则停止并改为使用它们。对于以非唯一方式使用ID的任何元素，将id属性更改为class非常简单。

以下是一个例子：

<div data-role="page" id="some-page">
    <div data-role="content">
        <ul class="page-list">
            <li class="first-list-item"></li>
        </ul>
        <a class="back-btn" data-role="button" href="#">Back</a>
    </div>
</div>

然后，您可以使用$.mobile.activePage.find('.back-btn')查找当前页面的后退按钮，也可以使用$('#some-page').find('.back-btn')定位特定后退按钮。

基本上我的建议归结为使用页面ID作为选择器的独特部分，然后使用类来更具体，因此每个页面可以具有相同的结构。这将有助于您编写可重复使用的代码。

单页网站（JQuery Mobile）：如何在DOM中管理一个页面的多个实例？

2 个答案: