Полимер: Rendering looped JSON

Я видел несколько ответов на это, но по какой-то причине я не могу окутать голову, почему это не работает. Я пытаюсь получить значения массива JSON и выводить их в пользовательских элементах HTML в моем шаблоне.Полимер: Rendering looped 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>

Все, что кажется, чтобы показать на странице есть "TEST" и пустой <ul></ul>

источник

2015-01-13 Mike

Если 'headerList' является вашим ответом JSON, то' headerList.headers' будет массивом, к которому вам нужно привязать. В настоящее время похоже, что вы привязываетесь непосредственно к 'headerList' (родительскому объекту). Там нечего итератировать. –

Информировать 'Полимер' о' headerList': 'Полимер (« graph-optionsLoad », {headerList: [] ...' (еще лучше в 'call()' callback) или использовать 'template is = 'auto-binding' '. Плюс iterationg должен быть сделан на' headerList.headers': 'repeat =" {{h в headerList.headers}} "'. – mudasobwa

Awesome Cory, это было -thanks! – Mike

Я не знаю, поможет ли это. Но я выложу это на случай, если это поможет кому-то другому. В Polymer 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

Полимер: Rendering looped JSON

ответ

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