Polymer子菜单/页面导航是否需要脚本? [英] Scripting Required for Polymer Submenu/Pages Navigation?

问题描述

首先，我爱上Polymer.我不精通javascript，并且我不完全了解正在发生的所有shadow-DOM内容.但我认为，Polymer正在为像我这样的人(非全职编码人员，他们需要通过将简单的片段连接在一起来快速地以编程方式构建网站)开发.这很有趣，一旦我了解其中的功能，它真的很可爱.

First, I'm loving Polymer. I'm not proficient in javascript, and I don't fully understand all the shadow-DOM stuff that's going on. But I take it that Polymer is under development for people like me (non-full-time coders who need to build websites quickly and programmatically by plugging simple pieces together). It's lots of fun, and once I understand how something in it works, it's really lovely.

我最近一次尝试构建网站/应用程序的尝试涉及到许多连接到核心页面的菜单和子菜单项.我喜欢这样的想法，即我可以将菜单项ID与div ID关联到核心页面中，然后执行该工作.当我仅使用菜单项和手工编码的ID进行操作时，它就可以完美地工作.但是，当我添加核心子菜单和模板时，请重复生成具有匹配ID的项目和页面，由于某些原因(对于其他人来说可能很明显)，事实并非如此.

My latest attempt to build a site / app involves a lot of menu and submenu items connected to core-pages. I love the idea that I can just connect a menu item id with a div id inside core-pages and have that work. And when I do it with just menu items and hand-coded ids, it works perfectly. But when I add in core-submenu and template repeat generated items and pages with matching ids, for some reason that is probably obvious to others, it doesn't.

我的问题:子菜单/页面是否需要脚本，还是我的聚合物标签做错了?如果需要编写脚本，我希望为初学者提供一些指向资源的指针.我看过spa.html演示，但其中不包含子菜单.有小费吗?

My question: Does submenu/pages require scripting, or am I doing something wrong with my polymer tags? If scripting is required, I'd love some pointers to resources for beginners. I've had a look at the spa.html demo, but it doesn't include submenus. Any tips?

现在，我的代码的核心如下所示: http://jsbin.com/xuzezelumeje/1/编辑

Right now, the core of my code looks like this: 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>

推荐答案

很高兴听到您喜欢Polymer！您的代码中有一些方面需要修改，但是我想您已经差不多了.这是一些有关如何使事情按预期工作的建议-这只是做事的一种方式，我敢肯定，还有其他解决方案.

Great to hear that you're enjoying Polymer! There are a few aspects of your code that need some modification, but I think you're almost there. Here's some advice on how to get things working as expected—it's just one way of doing things, and I'm sure there are other solutions, too.

• 您没有为id使用有效值. id不应包含空格，并且在您的元素中应该是唯一的(即，请勿为<core-item>和<div>分配相同的ID).我修改了代码，以通过Polymer过滤器函数传递数据，以用-字符替换空格，并在要分配页面<div>的id前面使用前缀page-. /li> 默认情况下，
• <core-menu>将如同选择了该子菜单一样对待在<core-submenu>上的轻击，即使您确实只想在您的<core-item>上轻击也可以触发选择.编写自定义的on-core-select处理程序使您可以灵活地忽略子菜单选择，并且可以将page-前缀添加到<core-pages>中使用的selectedPageId之前.
• 没什么大不了的，但是不需要将页面包装在一次性的<my-app> Polymer元素中.当您编写一个使用Polymer元素但并不意味着可重复使用的Polymer元素的Web应用程序时，Polymer包装器的替代方法是使用<template is="auto-binding">.您可以在<template is="auto-binding">中几乎完成所有工作，就像在Polymer元素的<template>中可以完成的一样. 此博客文章中有更多信息.

• You're not using valid values for your ids. ids shouldn't contain spaces, and they should be unique within your element (i.e. don't assign a <core-item> and a <div> the same id). I modified your code to pass your data through a Polymer filter function to replace the spaces with - characters, and to use the prefix page- in front of the id you're assigning your page <div>s.
• <core-menu> will, by default, treat tapping on a <core-submenu> as if you had selected that submenu, even though you really want only taps on your <core-item> to trigger a selection. Writing a custom on-core-select handler gives you the flexibility to ignore submenu selections, as well as prepend the page- prefix to the selectedPageId used in <core-pages>.
• This isn't a big deal, but wrapping your page in a throwaway <my-app> Polymer element is unnecessary. When you're writing a web app that consumes Polymer elements but isn't meant to be a reusable Polymer element itself, an alternative to a Polymer wrapper is to use <template is="auto-binding">. You can do pretty much everything within a <template is="auto-binding"> that you could do within a Polymer element's <template>. There's more information in this blog post.

您可以在下面看到修改后的代码的可运行示例:

You can see a runnable example of your modified code below:

<!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>

这篇关于Polymer子菜单/页面导航是否需要脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！