google-visualization - 如何渲染Polymer 中的 Web 组件

Question

注意：最后这个问题的更新（包括解决方案）......

我无法<google-chart>在我的页面上呈现元素。

我使用 Yeoman 的 Polymer 生成器搭建了一个 Polymer 项目。我添加了一些自定义元素，还从Polymer Catalog导入并实例化了 Iron 和 Paper 元素。我正在使用标准程序来执行此操作：

bower install --save [[polymerElement]]，然后
<link rel="import" href="../bower.../[[element]].html">在elements.html.

按照Google Web Components 目录部分中的<google-chart>说明，我尝试在我的页面上呈现他们的示例饼图。虽然元素没有正确呈现，但控制台中没有错误，元素的页面内容存在间隙，并且标记全部出现在我的检查器中，但有 2 个例外：

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

以下是相关代码：

元素.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... -->

索引.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>不在标签中，它似乎就会加载到主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>组件（所有其余内容都在其中）。

谁能解释为什么这不会加载到<template>块中？

谁能进一步解释我如何让这个元素在应用程序中我想要的任何地方呈现？

提前非常感谢大家。

解决方案：

使用注册和生命周期回调，我已使用以下方法成功地将其呈现在模板中：

首先，将可查询元素添加到<template>元素中以用作容器：

<p>This is a 'google-chart' object:</p>
<figure id="chart-container"></figure>

其次，在Polymer()构造函数内部，创建<google-chart>元素并将其作为attached生命周期事件的一部分附加到容器：

attached: function() {
  // create an instance with createElement:
  var chartContainer = document.querySelector('figure#chart-container');

  var pieChartAttributes = {
    'id': 'pie-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"}]',
  };

  var pieChart = document.createElement('google-chart');

  for (var key in pieChartAttributes) {
    pieChart.setAttribute(key, pieChartAttributes[key]);
  }

  chartContainer.appendChild(pieChart);
} // end attached()

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

score 4 · Accepted Answer

如此处所述：

插入空格

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

代替

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

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

score 0 · Accepted Answer

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

<!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>内容永远不会呈现。这是该类型元素的主要目的。您必须将其内容复制到templatemain 中的另一个元素（不是！）document以使其可见。其他嵌套元素不会渲染更多。这里的例子。

google-visualization - 如何渲染Polymer 中的 Web 组件

2 回答 2

Related

Reference