0

我正在尝试使用 router.loadContent() 函数加载动态页面，即使主视图已更改（即数据页面属性已正确设置），内容本身仍保持不变。发生这种情况的可能原因是什么？我看到了只替换 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 有什么问题，所以我将不得不深入研究代码以了解发生了什么。

4

1 回答 1

0

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

1）如果它是动态改变的，它真的不了解当前的 DOM 状态。就我而言， div.pages 是在视图已经初始化之后附加的，因此它不知道该怎么做。

2) 确保 .pages、.navbar 和 .page 存在，否则无法加载动态内容。

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

于 2017-12-01T20:15:26.390 回答