Jquery mobile splitview $.mobile.changePage 不起作用

Question

您好，我正在使用库中给出的 Jquery mobile splitview https://github.com/asyraf9/jquery-mobile/。

我在左侧面板 A 和 B 中有两个页面，在右侧面板中有两个页面 C 和 D。 最初我分别在左侧面板和右侧面板中渲染页面 A 和 C。现在，单击链接时，我想将左侧面板从 A 更改为 B，将右侧面板中的 C 更改为 D

更改并不完全有效，它仅更改左侧面板，而不更改右侧面板中放置上述锚点的页面。

请注意，上面的链接或按钮始终出现在右窗格中。如果我使用

Answer 1

单击链接/任何触发 splitview 更改的操作后执行 .refresh() 。

Answer 2

splitview 中有一个上下文加载选项。为什么不使用这个呢？

我找不到示例页面了，但我在脚本中使用相同的逻辑，所以...如果您找不到它，请尝试如下操作：

1）为您的链接提供上下文属性：

<a href="#some" data-panel="menu" data-context="#otherPage" data-context-panel="main">click me</a>

2）监听单击这些上下文链接，如下所示：

$(document).bind( "click", function( event ) {
  console.log("click registered");
  var link = $( self.findClosestLink(event.target) );

  if ( !link || event.which > 1) {
     return;
     }

  console.log( link );
  console.log( link.jqmData('context') );

  // context routine fires with context links
  if ( link.length === 1 && link.jqmData('context') ) {
     // fire your context function, RENAME THIS
     console.log("firing context routine");
     self.context( link );
     }

3）在某处放置上下文函数：

 context: function( object ) {

       var self = this,
           $context = object,
           $targetPanelID = $context.jqmData('context-panel');

       console.log("contextpage="+$context.href+"  contextPanel="+targetPanelID);

       // make sure the pageContainer is correctly set for the 2nd transition
       $.mobile.pageContainer = $('div:jqmData(panel="'+$targetPanelID+'")');

       // context changePage
       $.mobile.changePage( $( $context.jqmData('context') ), { transition:'slide', changeHash:true, fromHashChange: false, pageContainer: $.mobile.pageContainer });
       };

4）添加 JQM findclosestLink 函数（我忘记了）

  findClosestLink: function (ele) {
     var self = this;
     while (ele){
     if (ele.nodeName.toLowerCase() == "a"){
        break;
        }
    ele = ele.parentNode;
    return ele;
    }

您的链接将触发第一个changePage，您的上下文函数将触发第二个changePage。根据您使用它的位置，您的上下文changePage调用还将触发另一个hashChange事件，JQM可能不会阻止该事件（每个changePage还会触发一个hashChange，该事件被JQM使用ignoreNextHashChange阻止 - 检查源）。

因此，在进行第二次调用后，您可能必须执行类似的操作以确保 hashChange 被阻止：

  $.mobile.ignoreNextHashChange = true; 

整个事情都在我的 multiview 插件，但是该插件尚未完成，有 bug，我最近没有时间处理它。不过 Context 正在工作，所以您可以将其取出并根据需要使用它。

干杯!