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

您可以使用没有聚合物元素的tamplate。只需添加is =＆＃34;自动绑定＆＃34;属性。

<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

2 个答案: