聚合物子菜單/頁面導航需要腳本嗎？

首先，我很喜歡聚合物。我不擅長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

聚合物子菜單/頁面導航需要腳本嗎？

回答

相關問題