带核心的聚合物模板重复 ajax

Question

为什么我无法从我的 json 文件中获取要打印在 <p> 标签之间的数据？

我在下面的代码中遗漏了什么吗？我对 Polymer 及其数据绑定概念有点陌生，所以请帮助我。

我的 index.html 文件是，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Repeat</title>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/core-ajax/core-ajax.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
</head>
<style shim-shadowdom>
    html, body{
        margin: 0px;
        height: 100%;
        width: 100%;
        font-family: 'Roboto';
    }
</style>
<body unresolved>
    <polymer-element name="my-repeat">
    <template>
    <core-ajax auto url="http://localhost/repeat/data.json" handleAs="json" response="{{headerList.datas}}"></core-ajax>
        <style>
        </style>
        <template repeat="{{data in headerList.datas}}">
            <p>My name is </p>
            <p>{{data.name}}</p>
        </template>
    </template>
    <script>
    Polymer('my-repeat',{

    });
    </script>
    </polymer-element>

    <my-repeat></my-repeat>
</body>
</html>

这是我的 data.json 文件，

{
    "datas":[
        {"name":"Sandeep"},
        {"name":"Surabhi"},
        {"name":"Sangeeta"},
        {"name":"Sumant"},
        {"name":"Rohan"},
        {"name":"Bapi"}
    ]
}

Answer 1

问题出在绑定核心-ajax 响应中。应该是这样的：

 <core-ajax auto 
    url="data.json" 
    handleAs="json" 
    response="{{headerList}}"></core-ajax>

    <template repeat="{{data in headerList.datas}}">
     ....

这是工作示例：Plunk

编辑：

这是完整的例子

<script src="//www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">


<polymer-element name="my-repeat">
    <template>
    <core-ajax auto 
    url="data.json" 
    handleAs="json" 
    response="{{headerList}}"></core-ajax>
        <style>
        </style>
        Hi!

        {{headerList.datas[0].name}}
        <br><br>

        <template repeat="{{data in headerList.datas}}">
            <p>My name is </p>
            <p>{{data.name}}</p>
        </template>
    </template>
    <script>
    Polymer('my-repeat',{

      domReady: function(){


      },

    });
    </script>
    </polymer-element>

<my-repeat></my-repeat>

Answer 2

您可以使用没有聚合物元素的模板。只需添加 is="auto-binding" 属性。

<template is="auto-binding">

    <core-ajax 
        auto
        url="data.json" 
        handleAs="json" 
        response="{{list}}">
    </core-ajax>

    <template repeat="{{list}}">
        <p>{{name}}</p>
    </template>

</template>

带核心的聚合物模板重复 ajax

Polymer template repeat with core ajax

polymer