<google-chart> 在 <template is="dom-bind"> 中不起作用答案

【问题标题】：<google-chart> does not work inside <template is="dom-bind"><google-chart> 在 <template is="dom-bind"> 中不起作用
【发布时间】：2015-09-20 11:30:51
【问题描述】：

元素在

https://jsbin.com/fivamu/edit?html,output

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org">
  <script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/components/polymer/polymer.html">
  <link rel="import" href="/components/google-web-components/google-web-components.html">
</head>

<body>
  <template is="dom-bind">
    <h2>Doesn't work here:</h2>
    <google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
  </template>
  <h2>Works here:</h2> 
  <google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>

</html>

【问题讨论】：

标签： google-visualization polymer google-web-component

【解决方案1】：

尝试在方括号之间添加空格：

data='[ ["Country", "Popularity"],["Germany", 200],["France", 600],["RU", 700] ]'

【讨论】：

只是好奇。为什么这能解决问题？它奇迹般地解决了它，但我不明白为什么
可能是属性解析器的问题，因为[[...]] 也用于单向绑定。

【解决方案2】：

这将起作用（在您的 jsbin 中测试）：

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org">
  <script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/components/polymer/polymer.html">
  <link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>      
  <template id="t" is="dom-bind">
    <h2>Doesn't work here:</h2>
    <google-chart id='map'></google-chart>
  </template>
  <h2>Works here:</h2>    
  <google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>


<script>
  var t = document.querySelector('#t');  

  // The dom-change event signifies when the template has stamped its DOM.
  t.addEventListener('dom-change', function() {
    // auto-binding template is ready.
    console.log('ready');
    var map = document.querySelector('#map');
    map.setAttribute('type', 'geo');
    map.setAttribute('data', '[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]');
  });
</script>
</html>

google-chart 元素依赖于对 Google API 的异步调用。如果在模板标记其 DOM 之前这些调用未解决，则 google-chart 不完整。添加数据字段after the auto-binding template is ready 将模拟模板外的行为。

【讨论】：