Question

我试图运行一个简单的页面，通过iron-ajax获取数据，然后用给定的模板呈现它，但是没有成功。然后我尝试从谷歌运行一个示例页面，它不适合我。这是我尝试运行的示例页面：

<html>
<head>

    <title>iron-ajax</title>

    <script src="/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="/iron-ajax/iron-ajax.html">
    <link rel="import" href="/iron-image/iron-image.html">
    <link rel="import" href="/paper-styles/classes/typography.html">
    <link rel="import" href="/iron-flex-layout/classes/iron-flex-layout.html">
    <style>
        iron-image {
            background-color: lightgray;
            margin: 1em;
        }
    </style>
</head>
<body>

<template is="dom-bind" id="app">
    <iron-ajax auto
               url="https://www.googleapis.com/youtube/v3/search"
               params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
               handle-as="json"
               last-response="{{ajaxResponse}}"></iron-ajax>

    <h1>Video Feed</h1>
    <section class="flex layout horizontal wrap">
        <template is="dom-repeat" items="[[ajaxResponse.items]]">
            <div>
                <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2>
                <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
                <p>[[item.snippet.description]]</p>
            </div>
        </template>
    </section>
</template>

<script>
    var app = document.querySelector('#app');
    app.url = function (videoId) {
        return 'https://www.youtube.com/watch?v=' + videoId;
    };
</script>
</body>
</html>

我的bower.json内容：

{
  "name": "my-first-polymer-app",
  "description": "",
  "main": "app.js",
  "authors": [
    "123"
  ],
  "license": "MIT",
  "moduleType": [],
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#1.1.0",
    "flatiron-director": "Polymer/flatiron-director#~1.0.0",
    "sortable-table": "~0.11.1"
  }
}

我也试过导入polymer.html没有变化。我可以在Chrome的网络标签中看到每次导入。实际端点被点击，我可以在我的chrome的网络选项卡中看到。有任何想法吗？提前谢谢。

聚合物1.0铁-ajax和模板不起作用

0 个答案: