聚合物下拉式數據與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響應的綁定

回答

相關問題