聚合物子菜单/页面导航需要脚本吗？

首先，我很喜欢聚合物。我不擅长JavaScript，并且我没有完全理解所有正在发生的影子DOM内容。但我认为Polymer正在为像我这样的人开发（非全职编码人员需要快速构建网站并通过将简单的部分组合在一起编程）。这很有趣，而且一旦我明白它的内容是如何运作的，那真的很可爱。聚合物子菜单/页面导航需要脚本吗？

我最近尝试构建网站/应用涉及到很多连接到核心页面的菜单和子菜单项。我喜欢这样的想法，即我可以在核心页面中将菜单项ID与div id连接起来并完成这项工作。而当我用菜单项和手工编码的ID来完成时，它完美地工作。但是，当我添加核心子菜单和模板重复生成的项目和页面与匹配的ID，出于某种原因，可能是明显的其他人，它不。

我的问题：子菜单/页面是否需要脚本，或者我的聚合物标签是否有问题？如果需要编写脚本，我很乐意为初学者提供一些资源指针。我看了一下spa.html演示，但它不包含子菜单。有小费吗？

现在，我的代码的核心是这样的：http://jsbin.com/xuzezelumeje/1/edit

<script src="http://www.polymer-project.org/platform.js"></script> 
<link rel="import" href="http://www.polymer-project.org/components/core-scaffold/core-scaffold.html"> 
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html"> 
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html"> 
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html"> 
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html"> 
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html"> 

<polymer-element name="my-app"> 
    <template> 

    <core-scaffold> 
     <core-header-panel navigation flex mode="seamed"> 
     <core-toolbar></core-toolbar> 

      <core-menu selected="{{selected}}" valueattr="id" theme="core-light-theme"> 
      <template repeat="{{item in items}}"> 
       <core-submenu icon="visibility" label="{{item.year}}"> 
       <template repeat="{{office in item.offices}}"> 
        <core-item id="{{office}} {{item.year}}" label="{{office}}"></core-item> 
       </template> 
       </core-submenu> 
      </template> 
      </core-menu> 

     </core-header-panel> 
     <div tool>DC Campaign Finance Watch</div> 

     <core-pages selected="{{selected}}" valueattr="id"> 
      <template repeat="{{item in items}}"> 
      <template repeat="{{office in item.offices}}"> 
       <div id="{{office}} {{item.year}}">{{item.year}} {{office}}</div> 
      </template> 
      </template> 
     </core-pages> 

    </template> 

    <script> 
    Polymer({ 
     ready: function() { 
     this.items = [ 
    { 
     "offices": [ 
      "Mayor", 
      "Council Chairman", 
      "Council At-Large", 
      "etc" 
     ], 
     "year": "2014" 
    }, 
    { 
     "offices": [ 
      "Council At-Large" 
     ], 
     "year": "2013" 
    }, 
    { 
     "offices": [ 
      "Council Chairman", 
      "Council At-Large", 
      "etc" 
     ], 
     "year": "2012" 
    }, 
    { 
     "offices": [ 
      "Council At-Large", 
      "School Board Ward 4", 
      "School Board Ward 8" 
     ], 
     "year": "2011" 
    }, 
    { 
     "offices": [ 
      "Mayor", 
      "Council Chairman", 
      "etc" 
     ], 
     "year": "2010" 
    } 
]; 
     } 
    }); 
    </script> 
</polymer-element> 

<my-app></my-app>

来源

2014-10-02 Don

大听到你享受高分子！你的代码有几个方面需要修改，但我认为你几乎在那里。以下是关于如何让事情按预期工作的一些建议 - 这只是一种做事方式，我相信还有其他解决方案。

对于您的id s，您没有使用有效值。 id s不应该包含空格，并且它们在您的元素中应该是唯一的（即不要指定<core-item>和<div>相同的id）。我修改了代码，以便通过聚合物过滤器函数传递数据，以用-字符替换空格，并在id前使用前缀page-，您将指定页面<div> s。
<core-menu>默认情况下会按照您选择该子菜单的方式在<core-submenu>上点按，即使您真的只想触击<core-item>以触发选择。编写一个自定义的on-core-select处理程序可以让您灵活地忽略子菜单选项，并在<core-pages>中使用前缀selectedPageId作为前缀page-。
这不是什么大不了的事，但是用一次性包装来包装你的网页<my-app>聚合物元素是不必要的。当您编写一个消耗聚合物元素但不是可重复使用的聚合物元素的Web应用程序时，聚合物包装的另一种选择是使用<template is="auto-binding">。你可以在<template is="auto-binding">中做几乎所有的事情，你可以在Polymer元素的<template>中做。有更多的信息在this blog post。

你可以看到下面的修改的代码可运行的例子：

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
 
    <title>Polymer SPA</title> 
 

 
    <script src="//www.polymer-project.org/platform.js"></script> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-scaffold/core-scaffold.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-header-panel/core-header-panel.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-menu/core-submenu.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-item/core-item.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-pages/core-pages.html"> 
 
    </head> 
 

 
    <body unresolved fullbleed> 
 
    <template is="auto-binding" id="page-template"> 
 
     <core-scaffold theme="core-light-theme"> 
 
     <core-header-panel navigation flex mode="seamed" theme="core-light-theme"> 
 
      <core-toolbar theme="core-dark-theme"></core-toolbar> 
 
      <core-menu theme="core-light-theme" on-core-select="{{handleSelect}}"> 
 
      <template repeat="{{item in items}}"> 
 
       <core-submenu icon="visibility" label="{{item.year}}"> 
 
       <template repeat="{{office in item.offices}}"> 
 
        <core-item id="{{ office + '-' + item.year | replaceSpaces }}" label="{{office}}"></core-item> 
 
       </template> 
 
       </core-submenu> 
 
      </template> 
 
      </core-menu> 
 
     </core-header-panel> 
 
     <div tool>{{title}}</div> 
 
     <core-pages selected="{{selectedPageId}}" valueattr="id"> 
 
      <template repeat="{{item in items}}"> 
 
      <template repeat="{{office in item.offices}}"> 
 
       <div id="page-{{ office + '-' + item.year | replaceSpaces }}">{{item.year}} {{office}}</div> 
 
      </template> 
 
      </template> 
 
     </core-pages> 
 
     </core-scaffold> 
 
    </template> 
 
    
 
    <script> 
 
    \t var template = document.querySelector('#page-template'); 
 
     template.title = 'DC Campaign Finance Watch'; 
 

 
     template.replaceSpaces = function(str) { 
 
     \t return str.replace(/\s/g, '-'); 
 
    \t }, 
 
     
 
     template.handleSelect = function(e) { 
 
     if(e.detail.isSelected && e.detail.item.localName == 'core-item') { 
 
      this.selectedPageId = 'page-' + e.detail.item.id; 
 
     } 
 
     }, 
 
     
 
     template.items = [ 
 
     { 
 
      "offices": [ 
 
       "Mayor", 
 
       "Council Chairman", 
 
       "Council At-Large", 
 
       "Council Ward 1", 
 
       "Council Ward 3", 
 
       "Council Ward 5", 
 
       "Council Ward 6", 
 
       "Attorney General", 
 
       "School Board Ward 1", 
 
       "School Board Ward 3", 
 
       "School Board Ward 5", 
 
       "School Board Ward 6", 
 
       "School Board Ward 8", 
 
       "US Representative", 
 
       "US Senator", 
 
       "Alternate Democratic National Committeeman", 
 
       "Alternate Democratic National Committeewoman", 
 
       "At-Large DC Democratic State Committee", 
 
       "Democratic National Committeeman", 
 
       "Democratic National Committeewoman", 
 
       "Ward 3 DC Democratic State Committee", 
 
       "Ward 6 DC Democratic State Committee", 
 
       "Ward 1 DC Democratic State Committee" 
 
      ], 
 
      "year": "2014" 
 
     }, 
 
     { 
 
      "offices": [ 
 
       "Council At-Large" 
 
      ], 
 
      "year": "2013" 
 
     }, 
 
     { 
 
      "offices": [ 
 
       "Council Chairman", 
 
       "Council At-Large", 
 
       "Council Ward 2", 
 
       "Council Ward 4", 
 
       "Council Ward 5", 
 
       "Council Ward 7", 
 
       "Council Ward 8", 
 
       "School Board At-Large", 
 
       "School Board Ward 2", 
 
       "School Board Ward 7", 
 
       "School Board Ward 8", 
 
       "US Senator", 
 
       "Democratic Delegates", 
 
       "Republican National Committeewoman", 
 
       "Republican National Committeeman" 
 
      ], 
 
      "year": "2012" 
 
     }, 
 
     { 
 
      "offices": [ 
 
       "Council At-Large", 
 
       "School Board Ward 4", 
 
       "School Board Ward 8" 
 
      ], 
 
      "year": "2011" 
 
     }, 
 
     { 
 
      "offices": [ 
 
       "Mayor", 
 
       "Council Chairman", 
 
       "Council At-Large", 
 
       "Council Ward 1", 
 
       "Council Ward 3", 
 
       "Council Ward 5", 
 
       "Council Ward 6", 
 
       "School Board Ward 1", 
 
       "School Board Ward 3", 
 
       "School Board Ward 5", 
 
       "School Board Ward 6", 
 
       "US Representative" 
 
      ], 
 
      "year": "2010" 
 
     } 
 
     ]; 
 
    </script> 
 
    </body> 
 
</html>

来源

2014-10-02 15:55:23

哇 - 感谢你全面的回答和功能码！现在我可以看到为什么过滤器在其他人的代码中比我的更常见。我也看到了on-core-select是如何工作的，这非常好。我担心我必须熟练掌握熨斗的所有细节，但是您提供的js是令人放心的简单。非常感谢！ – Don 2014-10-03 00:17:45

聚合物子菜单/页面导航需要脚本吗？

回答

相关问题