Перемещение данных выпадающего полимера с AJAX-ответом

Я очень новичок в JS и Polymer. Не могу понять, почему это не работает, я переписал его в миллион раз по нескольким темам.Перемещение данных выпадающего полимера с AJAX-ответом

Идея состоит в том, чтобы иметь очень простое раскрывающееся меню с его данными выбора, связанными с ответом на запрос AJAX.

Основываясь на регистрации, AJAX отлично возвращается, но данные не связаны.

Помогите пожалуйста?

на основе AJAX Ответ:

var text = '{ "employees" : [' + 
      '{ "firstName":"John" , "lastName":"Doe" },' + 
      '{ "firstName":"Anna" , "lastName":"Smith" },' + 
      '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Сценарии и импорт (вероятно, больше, чем это должно быть, я экспериментировал с компонентами)

<script src="../../static/bower/webcomponentsjs/webcomponents.js"></script> 
<script src="../../static/npm/jquery/dist/jquery.js"></script> 
<script src="../../static/npm/webanimations/web-animations.min.js"></script>  

<link rel="import" href="../../static/bower/font-roboto/roboto.html"> 
<link rel="import" href="../../static/bower/core-header-panel/core-header-panel.html"> 
<link rel="import" href="../../static/bower/core-toolbar/core-toolbar.html"> 
<link rel="import" href="../../static/bower/paper-tabs/paper-tabs.html"> 
<link rel="import" href="../../static/bower/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../../static/bower/core-ajax/core-ajax.html"> 
<link rel="import" href="../../static/bower/polymer/polymer.html"> 
<link rel="import" href="../../static/bower/core-list/core-list.html"> 
<link rel="import" href="../../static/bower/core-collapse/core-collapse.html" > 
<link rel="import" href="../../static/bower/core-menu/core-menu.html"> 
<link rel="import" href="../../static/bower/paper-dropdown/paper-dropdown.html"> 
<link rel="import" href="../../static/bower/paper-item/paper-item.html">

HTML

<body> 

<polymer-element name="custom-selector" attributes="host data"> 
    <template> 
     <template if="{{data.length == 0}}"> 
      <core-ajax auto 
       url="dosql" 
       on-core-response="{{updateData}}" 
       on-core-error="{{onError}}" 
       response="{{yourData}}" 
      </core-ajax> 
     </template> 
     <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}"> 
      <paper-dropdown class="dropdown"> 
      <core-menu class="menu"> 
       <template repeat="{{data in yourData}}"> 
         <paper-item name="{{data.firstName}}">{{data.firstName}}</paper-item> 
       </template> 
      </core-menu> 
      </paper-dropdown> 
     </paper-dropdown-menu> 
    </template> 

    <script> 
     Polymer('custom-selector', { 
      ready: function() { console.log('firing ready'); 
       this.host = this.host || 'example.com'; 
       this.data = this.data || []; 
      }, 
      onError: function (e, resp) { console.log('onError'); 
       console.log('error!: ' + resp.response); 
      }, 
      updateData: function (e, resp) { console.log('firing updateData'); 
       console.log('AJAX response:'); 
       console.log(JSON.parse(resp.response)); 
       this.data = JSON.parse(resp.response); 

       console.log('this.data is now:'); 
       console.log(this.data); 
      } 
     }); 
    </script> 
</polymer-element> 



<custom-selector></custom-selector> 

</body>

источник

2015-06-10 Ashton

<template repeat="{{data in yourData}}">

yourData не является массивом, это объект. Что вы пытаетесь достичь, так это:

<template repeat="{{data in yourData.employees}}">

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

<polymer-element name="custom-selector" attributes="host data"> 
<template> 
    <core-ajax 
     id="employeesgetter" 
     handleAs="json" 
     url="dosql" 
     on-core-error="{{onError}}" 
     response="{{data}}"> 
    </core-ajax> 
    <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}"> 
     <paper-dropdown class="dropdown"> 
      <core-menu class="menu"> 
       <template repeat="{{employee in data.employees}}"> 
        <paper-item name="{{employee.firstName}}">{{employee.firstName}}</paper-item> 
       </template> 
      </core-menu> 
     </paper-dropdown> 
    </paper-dropdown-menu> 
</template> 

<script> 
    Polymer('custom-selector', { 
     data: { 
      employees: [] 
     }, 
     ready: function() { 
      console.log('firing ready'); 
      this.host = this.host || 'example.com'; 
      this.$.employeesgetter.go(); 
     }, 
     onError: function (e, resp) { 
      console.log('onError'); 
      console.log('error!: ' + resp.response); 
     } 
    }); 
</script> 
</polymer-element>

источник

2015-06-10 13:17:43

Благодарим за это - вы правы. После внесения изменений выпадающее меню все еще пустое, не появляется сообщение об ошибке. – Ashton

Привет, вы можете попробовать его с элементом, который я опубликовал, и сообщить результаты? –

Это красиво, и да, очень образованный :) Нет сообщения об ошибке, но выпадающее меню пустое. Не могли бы вы взглянуть на мой импорт? – Ashton

Перемещение данных выпадающего полимера с AJAX-ответом

ответ

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