如何在Polymer

时间：2015-10-20 21:09:22

标签： google-visualization polymer yeoman web-component html-imports

注意：最后对此问题进行更新（包括解决方案）......

我无法在我的网页上显示<google-chart>元素。

我使用Yeoman的聚合物生成器来支撑Polymer项目。我添加了一些自定义元素以及Polymer Catalog中导入和实例化的Iron和Paper元素。我正在使用标准程序来执行此操作：

  1. bower install --save [[polymerElement]]，然后
    2. {li> <link rel="import" href="../bower.../[[element]].html"> elements.html。

    在<google-chart> instructions中的Google Web Components catalog section之后，我尝试在我的网页上呈现他们的示例饼图。虽然元素无法正确呈现，但控制台中没有错误，元素的页面内容存在差距，标记全部显示在我的检查器中，但有两个例外：

    1. 呈现的HTML不包含＆＃34;行＆＃34;属性，我似乎无法修复。
    2. <google-chart>组件的内部内容相当稀疏，只有3个子元素：
      • <iron-ajax>
      • <div>
      • <google-legacy-loader>

      3. 以下是相关代码：

      elements.html： 

      <!-- Iron elements -->
<link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

<!-- 3rd Party Components -->
<link rel="import" href="../bower_components/google-apis/google-apis.html">
<link rel="import" href="../bower_components/google-apis/google-js-api.html">
<link rel="import" href="../bower_components/google-chart/google-chart.html">

<!-- etc... -->

      的index.html： 

      <section data-route="dashboard">
    <h2 class="page-title">Data Dashboard</h2>
    <p>This is the dashboard section</p>
    <p>This is a 'google-chart' object:</p>
    <google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' rows='[["Jan", 31], ["Feb", 28], ["Mar", 31]]' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'></google-chart>

    <p>You can get more info here:</p>
    <a href="https://elements.polymer-project.org/elements/google-chart">https://elements.polymer-project.org/elements/google-chart</a>
</section>
<!-- etc... -->

      更新

      正如Supersharp所述，此<google-charts>代码会在单页面环境中加载。

      至于我在Yeoman-scaffolded Polymer环境中的加载工作，经过进一步测试后，似乎<google-chart>对象将加载到主{{1}文件只要 app/index.html标记中的不是：

      <template>

      但是，我需要在<!doctype html> <html lang=""> <head> ... <!-- build:css styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild--> <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <!-- endbuild --> <!-- will be replaced with elements/elements.vulcanized.html --> <link rel="import" href="elements/elements.html"> <!-- endreplace--> <!-- For shared styles, shared-styles.html import in elements.html --> <style is="custom-style" include="shared-styles"></style> </head> <body unresolved class="fullbleed layout vertical"> <span id="browser-sync-binding"></span> NOTE: google-chart will load here... <template is="dom-bind" id="app"> NOTE: google-chart WON'T load here or in any of the elements below... <paper-drawer-panel id="paperDrawerPanel"> <!-- Drawer Scroll Header Panel --> <paper-scroll-header-panel drawer> <!-- Drawer Toolbar --> <paper-toolbar id="drawerToolbar"> ... </paper-toolbar> <!-- Nav Menu Section Title --> <paper-item class="menu-section-title"> ... </paper-item> <!-- Drawer Section Content --> <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]"> ... </paper-menu> </paper-scroll-header-panel> <!-- Main Area --> <paper-scroll-header-panel main condenses keep-condensed-header> <!-- Main Toolbar --> <paper-toolbar id="mainToolbar" class="tall" alt-class="medium-tall"> ... </paper-toolbar> <!-- Main Content --> <div class="content"> ... </div> </paper-scroll-header-panel> </paper-drawer-panel> </template> NOTE: google-chart will load here... <!-- build:js scripts/app.js --> <script src="scripts/userData.js"></script> <script src="scripts/app.js"></script> <!-- endbuild--> </body> </html> 块中加载<google-charts>组件（所有其他内容都在其中）。

      任何人都可以解释为什么这不会加载<template>块？

      任何人都可以进一步解释如何在应用程序中的任何地方渲染此元素吗？

      提前谢谢你们。

      SOLUTION：

      使用Registration and Lifecycle Callbacks我已使用以下方法在模板中成功渲染了这个：

      首先，在<template>元素中添加一个可查询元素作为容器：

      <template>

      其次，在<p>This is a 'google-chart' object:</p> <figure id="chart-container"></figure> 构造函数中，创建Polymer()元素并将其作为<google-chart>生命周期事件的一部分附加到容器中：

      attached

      虽然屏幕上的元素渲染稍有延迟，但这是一个可行的解决方案。

2 个答案:

答案 0 :(得分：4)

如上所述here：

插入空白

'rows': '[ ["Jan", 31], ["Feb", 28], ["Mar", 31] ]',

而不是

'rows': '[["Jan", 31], ["Feb", 28], ["Mar", 31]]',

因为模板内部[[]]被识别为单向数据绑定。

答案 1 :(得分：0)

我已将您的代码复制粘贴到一个文件中并且有效：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="import" href="/scripts/components/google-chart/google-chart.html">
</head>
<body>
    <section data-route="dashboard">
        <h2 class="page-title">Data Dashboard</h2>
        <p>This is the dashboard section</p>
        <p>This is a 'google-chart' object:</p>
        <google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' rows='[["Jan", 31], ["Feb", 28], ["Mar", 31]]' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'></google-chart>

        <p>You can get more info here:</p>
        <a href="https://elements.polymer-project.org/elements/google-chart">https://elements.polymer-project.org/elements/google-chart</a>
    </section>
</body>
</html>

注意：只有您明确使用的自定义元素（即 google-chart）才应导入为<link>。

<强>更新

永远不会呈现

<template>内容。它是这种元素的主要目的。您必须将其内容复制到主template中的另一个元素（不是document！）才能使其可见。其他嵌套元素不会渲染更多。 示例here。

相关问题
最新问题