Framework7 router.loadContent不加载新内容

Question

我尝试使用router.loadContent（）函数加载dynamicPages，即使主视图已更改（即数据页属性已正确设置），内容本身也保持不变。可能出现这种情况的原因是什么？我看到只是替换DOM内容的建议，但我希望Framework7能够处理新的页面加载。

关于为什么这可能不起作用的任何指针？

使用示例

进行更新

这是直接来自Chrome的示例内容。对于这种情况，只有导航栏可以滑入，而不是页面本身。

<div class="navbar" data-ss-navbar="customer-s-lists"> 
  <div class="navbar-inner"> 
   <div class="left"> 
    <a href="#" class="link icon-only back"> <i class="icon icon-back"></i> </a> 
   </div> 
   <div class="center sliding">
    Lists
   </div> 
   <div class="right"> 
    <a href="#" class="link icon-only" data-crm-add-to-list=""><i class="icon icon-add"></i></a> 
    <!--a href="#" class="link icon-only"><i class="icon icon-search"></i></a--> 
   </div> 
  </div> 
 </div><div class="pages" data-ss-container="customer-s-lists"> 
  <div data-page="customer-s-lists" class="page navbar-through toolbar-through lists-page"> 
   <div class="page-content"> 
    <div class="tabs container-dark"> 
     <div id="cl-tab2" class="tasks-list tab active"> 
      <div class="list-block"> 
       <ul data-crm-lists="Static"> 
       </ul> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
 </div>

这是尝试动态加载新页面之前的页面状态。

<div class="crm-app" style="height: 100%;">
 <div class="statusbar-overlay"></div> 
 <div class="panel-overlay"></div> 
 <div class="panel panel-left panel-reveal close-nav"> 
  <div class="navbar"> 
   <div class="navbar-inner"> 
    <div class="left"> 
     <a href="#" class="link icon-only close-panel" data-crm-close-menu=""><i class="icon icon-close-thick"></i></a> 
    </div> 
    <div class="center">
      My Sales 
    </div> 
    <div class="right"> 
     <div class="user-img"> 
      <img src="images/attachment.png" alt="">  
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="content-block"> 
   <ul class=""> 
    <li><a href="/crm/home" data-crm-navigation="tasks" class="external"><i class="icon icon-tasks"></i><br>Tasks<br></a></li> 
    <li><a href="/crm/contacts" class="external" data-crm-navigation="contacts" data-crm-card="spaces-developer.pxand/kanvas/cardContainer/crm-app:-contacts"><i class="icon icon-list"></i><br>Contacts<br></a></li> 
    <li><a href="/crm/customer-lists" class="external" data-crm-navigation="customer-lists"><i class="icon icon-list"></i><br>Customer Lists<br></a></li> 
    <li><a href="#" data-crm-navigation="albums"><i class="icon icon-gallary"></i><br>Gallary<br></a></li> 
    <li><a href="#" data-crm-navigation="timeline"><i class="icon icon-timeline"></i><br>Timeline<br></a></li> 
    <li><a href="/crm/compose" data-crm-navigation="compose-email" class="external"><i class="icon icon-compose"></i><br>Compose<br></a></li> 
    <li><a href="#" data-crm-navigation="compose-email-with-attachment"><i class="icon icon-capture"></i><br>Capture<br></a></li> 
    <li><a href="#" data-crm-navigation="profile" data-crm-card="spaces-developer.pxand/kanvas/cardContainer/crm-app:-list-form"><i class="icon icon-profile"></i><br>Profile<br></a></li> 
    <li><a href="/crm/stats" class="external" data-crm-navigation="stats"><i class="icon icon-stats"></i><br>Stats<br></a></li> 
    <li><a href="/crm/settings" class="external" data-crm-navigation="settings"><i class="icon icon-settings"></i><br>Settings<br></a></li> 
    <li><a href="/crm/product-catalog" class="external" data-crm-navigation="product-catalog"><i class="icon icon-product-catalog"></i><br>Product Catalog<br></a></li> 
   </ul> 
  </div> 
  <a href="#" id="fixed" class="logout-link" data-ss-logout="">LOGOUT</a> 
 </div> 
 <div class="panel panel-right panel-cover close-nav" style="" data-k-card-style="786ab644-c858-46ea-a6d0-686ef7d54f56,65be8746-b746-4b85-b058-e71b099ccd2f" data-card-id="786ab644-c858-46ea-a6d0-686ef7d54f56"> 
  <div class="content-block"> 
   <p class="">Right Panel content here</p> 
   <!-- Click on link with "close-panel" class will close panel --> 
   <p><a href="#" class="close-panel" data-crm-close-menu="">Close me</a></p> 
   <!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel --> 
   <div class="content-block"> 
   </div> 
  </div> 
 </div>
 <span style="display: none !important;display: none;" data-card-id="428cfeeb-a5c2-422d-81eb-37864285369e"></span>
 <div class="views" data-k-card-style="428cfeeb-a5c2-422d-81eb-37864285369e" data-card-id="428cfeeb-a5c2-422d-81eb-37864285369e"> 
  <div id="view-1" class="view view-main" data-k-widget="/_ra/spaces-developer.pxand/crm/js/controllers/contact.js" data-k-scope="main" data-crm-main-view=""><div class="navbar" data-k-card-style="fb78db96-a18f-4cd2-98cc-7bc8e7cba73c" data-card-id="fb78db96-a18f-4cd2-98cc-7bc8e7cba73c"> 
 <div class="navbar-inner"> 
  <div class="left"> 
   <a href="/crm/contacts" class="external link icon-only"> <i class="icon icon-back"></i> </a> 
  </div> 
  <div class="center sliding">
   Contacts
  </div> 
  <div class="right"> 
   <a href="#" class="link icon-only" data-crm-edit-contact=""><i class="icon icon-bars"></i></a> 
  </div> 
 </div> 
</div><div class="pages"> 
 <div data-page="contact" class="page navbar-through"> 
  <div class="page-content contacts-content"> 
   <div class="container container-light"> 
    <div class="contact-info-top"> 
     <h3 class="user-name">Name</h3> 
     <select class="program-btn" data-input="program" data-value=""> <option value="">Add to Program</option> </select> 
     <div class="crm-actions"> 
      <a href="#" class="crm-action" data-crm-sms=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-chatbubble"></i> 
       </div> 
       <div class="btn-label">
        message
       </div> </a> 
      <a href="#" class="crm-action" data-crm-phone=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-telephone"></i> 
       </div> 
       <div class="btn-label">
        call
       </div> </a> 
      <a href="#" class="crm-action" data-crm-video=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-telephone"></i> 
       </div> 
       <div class="btn-label">
        video
       </div> </a> 
      <a href="#" class="crm-action" data-crm-email=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-email"></i> 
       </div> 
       <div class="btn-label">
        email
       </div> </a> 
     </div> 
    </div> 
    <div class="crm-contact-type"> 
     <div class="crm-contact-type-text">
      Loyal
     </div> 
    </div> 
   </div> 
   <div class="contact-info-bottom"> 
    </div> 
    <hr class="thick"> 
    <div class="list-block more-listing"> 
     <ul> 
      <li> <a class="item-content external" href="/crm/contact-details"> 
        <div class="item-inner"> 
         <div class="item-title">
          Contact Details
         </div> 
        </div> </a> </li> 
      <li data-crm-view-purchases=""> <a class="item-content external" href="/crm/purchases?_target=spaces-identity.isaia/commerce/consumer/749875399818805249"> 
        <div class="item-inner"> 
         <div class="item-title">
          Purchases
         </div> 
         <div class="item-after" data-crm-lifetime-value="">$0.00</div> 
        </div> </a> </li> 
      <li data-crm-view-preferences=""> <a class="item-content external" href="/crm/tagging> 
        <div class="item-inner"> 
         <div class="item-title">
          Preferences &amp; Segmentation
         </div> 
        </div> </a> </li> 
      <li data-crm-view-notes=""> <a class="item-content external" href="/crm/notes"> 
        <div class="item-inner"> 
         <div class="item-title">
          Notes &amp; Communications
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content external" href="/crm/tasks"> 
        <div class="item-inner"> 
         <div class="item-title">
          Tasks
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content" href="#" data-crm-customer-lists=""> 
        <div class="item-inner"> 
         <div class="item-title">
          Lists
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content external" href="#" data-crm-delete-contact=""> 
        <div class="item-inner"> 
         <div class="item-title color-red">
          Delete Contact
         </div> 
        </div> </a> </li> 
     </ul> 
    </div> 
    <hr class="thick"> 
   </div> 
  </div> 
 </div> 
</div></div> 
 </div>
</div>

至于什么都没发生的情况，我现在无法重现。没有任何代码更改，它几天后突然开始工作。关于这个框架最糟糕的事情是，当某些东西不起作用时，错误信息不足。

更新2

通过代码调试后，似乎无法找到旧页面，因此无法加载新页面。我没有看到HTML的任何问题，因此我将不得不深入挖掘代码以了解其中发生的事情。

Answer 1

我逐行调试框架后想出了这个问题。在使用Framework7时需要注意以下事项：

1）如果它动态改变，它实际上并不了解当前的DOM状态。对于我的情况，在视图已经初始化之后附加div.pages，因此它不知道该怎么做。

2）确保.pages，.navbar和.page在那里或加载动态内容不起作用。

我的解决方法是在加载DOM后设置mainView.pagesContainer变量。我将通过检查视图中的元素来建议框架的所有者具有故障安全性。让我们看看他对此有何看法。