聚合物导航 - 如何在单击侧边栏链接时修改主要内容？

Question

我正在使用聚合物核心抽屉面板创建带有一些内容的单页面应用程序和用于导航的滑出式边栏。

当点击<paper-item>时，如何修改<div class="content">的内容？ PolymerJS最佳实践是什么？

例如： 如果点击“第一项”，我希望div阅读“嘿，这是第一项内容”。 如果点击“第二项”，我希望div阅读“嘿，这是第二项内容”。

这是我从polymer example小修改（纸项目，而不是核心项目和名称更改）得到了代码：

HTML：

<core-header-panel drawer> 
    <core-toolbar id="navheader'"> 
    <span>Menu</span> 
    </core-toolbar> 
    <core-menu> 
    <paper-item label="First Item"></paper-item> 
    <paper-item label="Second Item"></paper-item> 
    </core-menu> 
</core-header-panel> 

<core-header-panel main> 
    <core-toolbar id="mainheader"> 
    <paper-icon-button 
     id="navicon" icon="menu"></paper-icon-button> 
    <span flex>Title</span> 
    </core-toolbar> 
    <div class="content"> 
    Hey, this is my main content 

    </div> 
</core-header-panel> 

JS：

document.addEventListener('polymer-ready', function() { 
    var navicon = document.getElementById('navicon'); 
    var drawerPanel = document.getElementById('drawerPanel'); 
    navicon.addEventListener('click', function() { 
    drawerPanel.togglePanel(); 
    }); 
}); 

CSS：

body { 
    font-family: sans-serif; 
} 
core-header-panel { 
    background: white; 
} 
core-toolbar { 
    background-color: #03A9F4; 
} 
#navheader { 
    background-color: #56BA89; 
} 
.content { 
    padding: 20px; 
} 
/* drawer is always visible on a wide screen 
    so menu button isn't required */ 
core-drawer-panel:not([narrow]) #navicon { 
    display: none; 
} 

Answer 1

林不知道或不。常见问题解答中有一部分SPA，他们建议使用熨斗导演来处理导航。 我跟着我找到的例子，它非常简单。

https://github.com/ebidel/polymer-change/blob/master/demos/spa.html

https://www.polymer-project.org/resources/faq.html

关于如何创建一个SPA好文章：https://www.polymer-project.org/articles/spa.html

例子：

<core-header-panel navigation flex mode="seamed"> 
     <core-toolbar style="background-color: #526E9C; color: #fff;">vanilla polymer demo</core-toolbar> 
     <core-menu> 
      <core-item icon="settings" label="Dashboard"><a href="#dashboard"></a></core-item> 
      <core-item icon="settings" label="Flow Analysis"><a href="#flow"></a></core-item> 
      <core-item icon="settings" label="Alerts"><a href="#alerts"></a></core-item> 
     </core-menu> 
    </core-header-panel> 

    <div tool>Polymer App - {{route}}</div> 

    <div class="content"> 

     <core-pages selected="{{route}}" valueattr="hash"> 
      <div hash=""> 
       Default page 
      </div> 
      <div hash="dashboard"> 
       <revenue-dashboard></revenue-dashboard> 
      </div> 
      <div hash="flow"> 
       <flow-analysis></flow-analysis> 
      </div> 
      <div hash="alerts"> 
       <alerts-page></alerts-page> 
      </div> 
     </core-pages> 

    </div> 

Answer 2

更多的搜索后，我发现GDG Beijing's Polymer site和GitHub

它的代码我设法得到它使用core-animated-pages及其hash_nav()功能工作。我不确定这是否是PolymerJS导航的“最佳实践”，所以我很乐意看到其他人的评论/答案。

这是新的HTML和JS感谢他们的代码：

HTML：

 <core-header-panel drawer> 
     <core-toolbar id="navheader'"> 
      <span>Menu</span> 
     </core-toolbar> 
     <core-menu id="nav_menu" selected="0"> 
      <paper-item label="Home"><a href="#"></a></paper-item> 
      <paper-item label="First Item"><a href="#first"></a></paper-item> 
      <paper-item label="Second Item"><a href="#second"></a></paper-item> 
     </core-menu> 
     </core-header-panel> 

     <core-header-panel main> 
     <core-toolbar id="mainheader"> 
      <paper-icon-button 
      id="navicon" icon="menu"></paper-icon-button> 
      <span flex>Title</span> 
     </core-toolbar> 
     <div id="content-container"> 
      <core-animated-pages id="content-pages" selected="0"> 
      <section> 
       Home content 
      </section> 

      <section> 
       First content 
      </section> 

      <section> 
       Second content 
      </section> 

      </core-animated-pages> 
     </div> 

     </core-header-panel> 

    </core-drawer-panel> 

JS：如果你说的是单页的应用程序

document.addEventListener('polymer-ready', function() { 
var navicon = document.getElementById('navicon'); 
var drawerPanel = document.getElementById('drawerPanel'); 
navicon.addEventListener('click', function() { 
    drawerPanel.togglePanel(); 
}); 

window.onhashchange=hash_nav; 
}); 

function hash_nav() { 
    var nav_links = document.querySelectorAll('core-menu paper-item a'); 
    for(var i = 0; i < nav_links.length; i++){ 
    if(nav_links[i].hash === window.location.hash){ 
     document.querySelector('#nav_menu').selected = i; 
     document.querySelector('#content-pages').selected = i; 
     document.getElementById('drawerPanel').togglePanel(); 

     break; 
    } 
    } 
};