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

时间：2014-10-02 13:44:50

标签： json menu polymer

首先，我喜欢Polymer。我不熟悉javascript，而且我不完全理解所有正在进行的shadow-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>

1 个答案:

答案 0 :(得分：4)

很高兴听到你正在享受聚合物！您的代码有一些方面需要进行一些修改，但我认为您几乎就在那里。以下是关于如何让事情按预期工作的一些建议 - 这只是一种做事方式，而且我也确定还有其他解决方案。

  • 您没有为id使用有效值。 id s不应包含空格，并且它们在您的元素中应该是唯一的（即不要为<core-item>和<div>分配相同的ID。我修改了你的代码，通过Polymer过滤器函数传递你的数据，用-个字符替换空格，并在你指定页面的page-前面使用前缀id <div>秒。
    • 默认情况下，
  • <core-menu>会对您点击<core-submenu>进行处理，就像您选择了该子菜单一样，即使您真的只希望点击<core-item>来触发选择。编写自定义on-core-select处理程序使您可以灵活地忽略子菜单选择，并将page-前缀添加到selectedPageId中使用的<core-pages>。
  • 这不是什么大问题，但是将页面包装在一次性<my-app> Polymer元素中是不必要的。当您编写一个使用Polymer元素但不打算成为可重复使用的Polymer元素的Web应用程序时，Polymer包装器的替代方法是使用<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>
    	var template = document.querySelector('#page-template');
      template.title = 'DC Campaign Finance Watch';

      template.replaceSpaces = function(str) {
      	return str.replace(/\s/g, '-');
    	},
        
      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>

相关问题
最新问题