2015-06-23 3 views
3

Как загрузить json-файл и использовать данные в повторяющемся шаблоне? Этот код не производит ничего:Использование полимерного железа-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-файл (Edit: исправлена ​​после ответа Васек в):

{ 
    [ 
     { 
      "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> 

Я включаю железо-ajax в другом месте моего кода. Я уже тестировал общую функциональность. Он работает, только не в контексте привязки данных.

+0

Ваш исправленный код JSON по-прежнему не соответствует действительности. Удалите объект самого высокого уровня. – crazypeter

ответ

4

Во-первых, как говорит васек, ваш JSON неверен. dom-repeat нужен массив для перебора и ваш JSON в настоящее время возвращает объект. Во-вторых, вы неправильно используете свойства на элементе iron-ajax. Как docs состояние

Для того, чтобы настроить верблюд регистра свойств элементов с использованием атрибутов приборной случае следует использовать в имени атрибута.

Вы пытаетесь установить handleAs и lastResponse. Для этого вам необходимо поменять их на приборную панель:

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

В противном случае все остальное должно работать правильно.

+0

Работает! Благодаря!! – Squis

1

Ваш json-файл находится в неправильном формате. Это должно быть так:

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

Gah! Конечно! Тем не менее, не работает. При проверке элемента в Chrome все, что я вижу, есть # document-fragment. – Squis

+0

@Squis Попробуйте изменить json-файл на: {"list": [...]}. А в элементах набора шаблонов атрибут {{data.list}}. – vasek

1

Я также придерживался аналогичного кода, к сожалению, вышеупомянутые ответы не решили проблему для меня. Однако, когда я положил элемент <iron-ajax> после <template is="dom-repeat">, это сработало для меня.

Смежные вопросы