Javascript 获取iron数据表以呈现演示数据_Javascript_Polymer_Polymer 1.0_Iron Data Table

Javascript 获取iron数据表以呈现演示数据

javascript polymer

Javascript 获取iron数据表以呈现演示数据,javascript,polymer,polymer-1.0,iron-data-table,Javascript,Polymer,Polymer 1.0,Iron Data Table,，我希望iron数据表能够以类似的方式呈现填充的数据。取而代之的是，仅呈现表格标题，但其余单元格无法填充可以对JSbin进行哪些更改以实现所需的行为 http://jsbin.com/hepebapori/1/edit?html，控制台，输出 <!DOCTYPE html> <html> <head> <base href="https://polygit.org/polymer+:master/components/">

，我希望

iron数据表

能够以类似的方式呈现填充的数据。取而代之的是，仅呈现表格标题，但其余单元格无法填充

可以对JSbin进行哪些更改以实现所需的行为

http://jsbin.com/hepebapori/1/edit?html，控制台，输出

<!DOCTYPE html>
<html>  
  <head>
    <base href="https://polygit.org/polymer+:master/components/">
    <link rel="import" href="polymer/polymer.html">

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="paper-button/paper-button.html">

    <link href="https://rawgit.com/saulis/iron-data-table/master/iron-data-table.html" rel="import">

  </head>
  <body>
    <dom-module id="x-foo">
      <template>
        <style>
        </style>
        <paper-button on-tap="msg">Click Me</paper-button>

        <iron-ajax auto
          url="https://saulis.github.io/iron-data-table/demo/users.json" 
          last-response="{{users}}"
          >
        </iron-ajax>
        <iron-data-table selection-enabled items="[[users.results]]">
          <data-table-column name="Picture" width="50px" flex="0">
            <template>
              <img src="[[item.user.picture.thumbnail]]">
            </template>
          </data-table-column>
          <data-table-column name="First Name">
            <template>[[item.user.name.first]]</template>
          </data-table-column>
          <data-table-column name="Last Name">
            <template>[[item.user.name.last]]</template>
          </data-table-column>
          <data-table-column name="Email">
            <template>[[item.user.email]]</template>
          </data-table-column>
        </iron-data-table>

      </template>
      <script>
        (function(){
          'use strict';
          Polymer({
            is: 'x-foo',
            msg: function() {
              console.log('This proves Polymer is working!');
            },
          });
        })();
      </script>
    </dom-module>
    <x-foo></x-foo>
  </body>
</html>


点击我
[[item.user.name.first]]
[[item.user.name.last]]
[[item.user.email]]
（功能（）{
"严格使用",；
聚合物({
是‘x-foo’，
msg:function（）{
log（'这证明聚合物起作用！'）；
},
});
})();

您的问题是导入

铁数据表。仅仅使用rawgit并不能起到神奇的作用，因为您需要使用代理服务器，例如使webcomponents工作（您已经像这样加载了Polymer，但不是iron data table
）
由于表现平庸，我花了一段时间才弄明白如何将聚合物导入与铁数据表
相结合
需要的两种配置是polymer+：master
和iron data table+Saulis+：master

组合起来，您的base
标记如下所示：
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">



使用此选项，您可以像导入其他元素一样导入元素：
<link rel="import" href="iron-data-table/iron-data-table.html">



（在Google Chrome中测试）
要开始在项目中使用iron数据表，您必须：
下载软件包：
创建引用这些包的html文件：
bower i iron-data-table -S

bower install --save PolymerElements/iron-ajax

<html>
<head>
    <title></title>
  <meta charset="utf-8" />
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/iron-ajax/iron-ajax.html" />
    <link rel="import" href="bower_components/iron-data-table/iron-data-table.html">
</head>
<body>
    <template is="dom-bind">
        <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
        <iron-data-table items="[[data]]">
            <data-table-column name="First Name">
                <template>
                    [[item.name.first]]
                </template>
            </data-table-column>
            <data-table-column name="Last Name">
                <template>
                    [[item.name.last]]
                </template>
            </data-table-column>
        </iron-data-table>
    </template>
</body>
</html>

[
  {"name": {
    "title": "miss",
    "first": "donna",
    "last": "davis"
  }},
  {
    "name": {
      "title": "mr",
      "first": "samuel",
      "last": "kelley"
    }
  },
  {"name": {
    "title": "ms",
    "first": "katie",
    "last": "butler"
  }}
]