在重複模板中使用Polymer-ajax

如何加載json文件並在重複模板中使用數據？此代碼不會產生任何東西：在重複模板中使用Polymer-ajax

<dom-module id="name-list"> 
    <template> 
     <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> 
     <template is="dom-repeat" items="{{data}}"> 
      <div>First name: <span>{{item.firstName}}</span></div> 
      <div>Last name: <span>{{item.lastName}}</span></div> 
     </template> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
     is: "name-list" 
    }); 
</script>

這是我的JSON文件（編輯：vasek的答覆後糾正）：

{ 
    [ 
     { 
      "firstName": "John", 
      "lastName": "Smith" 
     },{ 
      "firstName": "Jane", 
      "lastName": "Doe" 
     } 
    ] 
}

我想有以下幾點：

<div>First name: <span>John</span></div> 
<div>Last name: <span>Smith</span></div> 
<div>First name: <span>Jane</span></div> 
<div>Last name: <span>Doe</span></div>

我在代碼中的其他地方包括了iron-ajax。我已經測試了一般功能。它的工作原理不在數據綁定的範圍內。

來源

2015-06-23 Squis

您更正的JSON代碼仍然是錯誤的。刪除最高級別的對象。 – crazypeter

首先，因爲vasek說，你的JSON是不正確的。 dom-repeat需要一個數組迭代，並且您的JSON當前正在返回一個對象。其次，您正在錯誤地訪問iron-ajax元素上的屬性。因爲docs狀態

爲了使用屬性配置元素的駱駝屬性，應在屬性名稱中使用dash-case。

您正在嘗試設置handleAs和lastResponse。爲了做到這些，您需要將它們更改爲破折號：

<iron-ajax auto url="names.json" handle-as="json" last-response="{{data}}"></iron-ajax>

否則，其他所有應該正常工作。

來源

2015-06-23 10:02:41

工程！謝謝！！ – Squis

您的json文件格式不正確。它應該是這樣的：

[ 
     { 
      "firstName": "John", 
      "lastName": "Smith" 
     }, 
     { 
      "firstName": "Jane", 
      "lastName": "Doe" 
     } 
    ]

來源

2015-06-23 07:17:45 vasek

嘎！當然！儘管如此，仍然沒有工作。在Chrome中檢查元素時，我在那裏看到的是＃document-fragment。 – Squis

@Squis嘗試將json文件修改爲：{「list」：[...]}。並且在模板集項目屬性爲{{data.list}}。 – vasek

我也被一個類似的代碼卡住，不幸的是上面的答案沒有解決我的問題。但是，當我在<template is="dom-repeat">之後放置<iron-ajax>元素時，它對我有效。

來源

2016-05-26 06:49:46

在重複模板中使用Polymer-ajax

回答

相關問題