![](/img/trans.png)
[英]What is the correct way to mock useSelector multiple times in a component?
[英]What's the correct way to link to the same page multiple times?
我正在尝试使用一个可以显示相同类型数据的页面(比如水果)。 然后我想在我的网站层次结构中的任何地方加载此页面,但每次都使用不同的参数。
我的主页面如下,有两个链接到同一页面show.html
:
<div data-role="navbar" data-iconpos="top" data-theme="a" class="nav-ecommera">
<ul >
<li>
<a href="show.html?p=apples" data-role="button">Apples</a>
</li>
<li>
<a href="show.html?p=oranges" data-role="button">Oranges</a>
</li>
</ul>
</div>
单击两个按钮中的每个按钮将在DOM中创建页面show.html
的新实例。 因此,show.html中的所有项目都将在DOM中具有重复的ID。
在我的javascript中,我想动态填充show.html页面:
$('div[id="show"]').live("pagebeforeshow", function(e, data) {
var p = getUrlParameter("p");
show(p);
});
var show = function(p) {
$.ajax({
url:'http://show.com/?p='+p,
success: function(data) {
// Refresh 'show' page with new data
// First time: It's fine.
// Second time: 'show' page is duplicated in the DOM so it's messy.
}
});
}
现在show.html
第一次加载一切都很好。 然而,第二次show.html
所有内容都被加载两次,而DOM包含许多重复的ID。
有没有办法在加载新的第一页之前从DOM中删除第一页?
要么:
有没有更好的方法可以做我想在这里实现的目标?
更新:我已经尝试在加载新页面时删除以前的show
页面实例。 它的工作原理就显示第二页而言。 但是在手动删除第一页后需要第二次显示时会出现问题。
我认为原因是jQuery mobile似乎认为第一页已经加载,尽管我们手动删除了它。 所以当再次访问时它不会完全重新加载第一页。 我正在谈论这个导航序列:首页 - >苹果 - >回到家 - >橘子 - >回到家 - >苹果(这里你得到一个缺陷的页面)。
1)您可以将ID更改为类。
2)你可以有封装show.html的包装器,当你第二次尝试加载时,找到你之前加载的那个并删除它。
你的show.html:
<div class='previous-load'>
... enclosed show.html HTML ...
</div>
JavaScript的:
$('div[id="show"]').live("pagebeforeshow", function(e, data) {
var p = getUrlParameter("p");
show(p);
});
var show = function(p) {
$(".previous-load").remove();
$.ajax({
url:'http://show.com/?p='+p,
success: function(data) {
// Refresh 'show' page with new data
// First time: It's fine.
// Second time: 'show' page is duplicated in the DOM so it's messy.
}
});
}
您可以通过带有reloadPage
选项的$.mobile.changePage()
加载show.php
页面:
//bind to all links that have an HREF attribute that starts with "show.html"
$('a[href^="show.html"]').bind('click', function () {
//set a default query-string for the page-load
var query = '';
//if this link's HREF attribute has a query-string, use it
if (this.href.indexOf('?') > -1) {
query = this.href.split('?')[1];
}
//forward the user to the page, telling jQuery Mobile to reload the page
//which will use the new query-string sent
$.mobile.changePage('show.html', { reloadPage : true, data : query });
//prevent the default behavior of the click
return false;
});
reloadPage ( 布尔值 ,默认值:false)
强制重新加载页面,即使它已经在页面容器的DOM中。 仅在changePage()的“to”参数是URL时使用。 这是
$.mobile.changePage()
的文档:
资料来源: http : //jquerymobile.com/demos/1.1.0/docs/api/methods.html
当jQuery Mobile加载同一页面两次时,因为HREF属性中data-url
与伪页面元素上的data-url
属性不匹配。 要调试此问题,请确保在插入DOM时检查show.html
页面中添加的data-url
属性。 如果它似乎没有匹配,那么你可以在元素上设置data-url
属性,如:
<div data-url="/show.html" data-role="page" id="show-page">
...
</div>
然后,您将始终使用以下网址链接到该页面: /show.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.