Question

我正在使用Polymer core-drawer-panel创建一个包含一些内容的单页应用程序和一个用于导航的滑出侧边栏。

如何在点击<div class="content">时修改<paper-item>的内容？ 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，他们建议使用flatiron-director来处理导航。我按照我发现的一个例子来说非常简单。

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()功能让它工作。我不确定这是不是最佳实践＆＃34;对于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;
    }
  }
};

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

2 个答案: