聚合物：渲染環狀JSON

我已經看到了一些答案，但由於某種原因，我無法將我的頭圍繞爲什麼這不起作用。我試圖獲取JSON數組的值，並將其輸出到我的模板中的自定義HTML元素中。聚合物：渲染環狀JSON

聚合物元件：

<polymer-element name="graph-optionsLoad"> 
    <template> 
     <core-ajax auto url="/getDataHeaders" 
       handleAs="json" response="{{headerList}}"></core-ajax> 
     <div>TEST</div> 
     <ul> 
      <template repeat="{{h in headerList}}"> 
       <li> {{h}}</li> 
      </template> 
     </ul> 

    </template> 

    <script> 
     Polymer("graph-optionsLoad", { 
     headerListChanged: function(oldValue) { 
      console.log(this.headerList); 
      // this.headers; 
      } 
     }); 


    </script> 
</polymer-element>

JSON：

{ 
"headers": [ 
"MakeSpawnFish", 
"MakeEndGame", 
"MakeModeChange", 
"MakeConnectComponent", 
"MakeCircuitCreated", 
"MakeStartGame", 
"MakeSnapshot", 
"MakeResetBoard", 
"MakeAddComponent", 
"MakeCaptureFish", 
"MakeRemoveComponent", 
"MakeDisconnectComponent" 
] 
}

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="/static/bower_components/webcomponentsjs/webcomponents.js"></script> 

     <link rel="import" href="/static/bower_components/my-elements/graph-optionsLoad.html"> 
     <link rel="import" href="/static/bower_components/core-ajax/core-ajax.html"> 

     <!-- <link rel="import" href="/static/greeting-tag.html"> --> 
    </head> 

    <body> 
    <graph-optionsLoad></graph-optionsLoad> 

    <script> 

    </script> 
    </body> 
</html>

所有這一切似乎顯示在頁面上的「測試」和空<ul></ul>

來源

2015-01-13 Mike

如果'headerList'是您的JSON響應，那麼'headerList.headers'將是您需要綁定的數組。目前，它看起來像直接綁定到'headerList'（父對象）。沒有什麼可以迭代的。 –

關於'headerList'通知'Polymer'：'Polymer（「graph-optionsLoad」，{headerList：[] ...'（在'create（）'回調中更好）或者使用'template is ='auto-binding' '。iterationg應該在'headerList.headers'上完成：'repeat =「{{h in headerList.headers}}」'。 – mudasobwa

真棒Cory就是這樣 - 謝謝！ – Mike

我不知道這是否有幫助。但爲了防止別人幫助，我會加以解決。在聚合物1.0：

<dom-module id="graph-optionsload"> 
    <template> 
     <iron-ajax auto 
       url="/getDataHeaders" 
       handle-as="json" 
       last-response="{{headerList}}" 
       on-response="listChanged"></iron-ajax> 
     <div>TEST</div> 
     <ul> 
      <template is="dom-repeat" items="[[headerList]]" as="[[h]]"> 
       <li>[[h]]</li> 
      </template> 
     </ul> 
    </template> 
    <script> 
     Polymer({ 
      id: "graph-optionsload", 
      properties: { 
       headerList: {type: Array, value:()=>{return []}, notify: true} 
      }, 
      listChanged: function(oldValue) { 
       console.log(this.headerList); 
       // this.headers; 
      } 
     }); 
    </script> 
</dom-module>

這應該爲你工作。

來源

2015-11-13 16:03:05

聚合物：渲染環狀JSON

回答

相關問題