如何動態填充鐵列表元素

Question

所以我有一個用戶數據歷史的鐵列表元素。 鐵列表不是自定義元素的一部分。 它只是在頁面上。 一旦用戶成功登錄，我想填充。也許這只是我對聚合物的經驗不足，但似乎沒有一種直接的方法來做到這一點。 第一次嘗試（簡化了閱讀，例如我實際上並沒有使用jquery，有很多錯誤處理代碼，我省略了等）：

<iron-list as="item" style='height: 100%;' id='history-list'>
  <template>
    <div style='min-height: 140px;'>
      <ul>
        <!-- various fields for each record as list items -->
      </ul>
    </div>
  </template>
</iron-list>
<script>
  //once user is logged in
  var items = $.getJSON('userhistoryscript');
  //setAttribute doesn't work either
  document.getElementById('history-list').items = items;
</script>

我發誓這在早期版本的Polymer中有效。 但它現在似乎不起作用，這很好，但我需要一個替代方案。

我考慮過的一些替代方案：

1. 在相同的DOM范圍內使用iron-ajax元素，並在用戶登錄后設置'URL以觸發xhr請求。 我不確定這是否有用。

2. 將列表包裝在自定義元素中，並根據chrisW的答案使用iron-meta-query。

那些選擇很糟糕 。 我無法相信沒有更簡單的方法來完成這一壯舉。 如何根據用戶輸入有條件地獲取數據並動態地向頁面添加鐵列表（或更新已存在的頁面）？ 這個用例真的沒有API嗎？

UPDATE

謝謝您的回答。 事實證明我的原始代碼實際上工作正常：它實際上是一個構建過程問題。 出於某種原因，當我通過bower安裝項目依賴項時，沒有安裝iron-list。 我拿出硫化導入（也不一定包含煉鐵列表的參考）並直接導入所有元素，然后我得到404並找出發生了什么。

Answer 1

我認為，對於最佳實踐，您應該使用this.$.historyList來為此元素提供id。 無論如何，當你獲得填充iron-list數據時，你應該使用this.set('items', data); 使用您的元素的示例如下所示：

<iron-list>
    <template is="dom-repeat" items="{{data}}" as="history">
        <!--history.property-->
    </template>
 </iron-list>

<script>
  Polymer({
    properties:{
        data:{type:Array, value:[],}
    },
    _functionToSetDataWhenUserIsLoggedIn: function(data){
        this.set('data',data);
    }
  });
</script>

編輯

鐵列表的一個例子

<template is="dom-bind">
  <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
  <iron-list items="[[data]]" as="item">
    <template>
      <div>
        Name: <span>[[item.name]]</span>
      </div>
    </template>
  </iron-list>
</template>

此示例使用自動執行的ajax調用並填充iron-list而無需創建自定義元素。

更多關於iron-list信息：
https://elements.polymer-project.org/elements/iron-list

Answer 2

我並不完全理解你的問題。 希望這可以幫助。

  <iron-list items="[[data]]" as="item">
    <template>
      <div>
        Name: <span>[[item.name]]</span>
      </div>
    </template>
  </iron-list>   

    properties:{
        data:{type:Array, value:[],}
    },
    // the attached function is automatically called 
    attached: function() {
       // Use an iron meta in the element that you keep track in of login information
       // or create an onLogin listener
       var isLoggedIn = new Polymer.IronMetaQuery({key: 'isLoggedIn'}).value, 
       if (isLoggedIn) {
          var jsonData = $.getJSON('userhistoryscript'); 
          this.set('data',jsonData);
       }
    }

旁注，當通過Polymer元素中的id訪問元素時，請確保以這種方式執行：

this.$.elementId

要么

Polymer.dom('#elementId')

編輯，因為您不想創建自定義聚合物元素

源代碼

  <template is="dom-bind">
    <iron-list id="list">

    </iron-list>  

  </template>

  <script>
    document.addEventListener('onLogin', function(event) {
      var list = document.getElementById('#list');
      var jsonDataObjects = $.getJSON('userhistoryscript'); 
      for (var i = 0; i < jsonDataObjects.length; i++) {
        var div = document.createElement('div');
        div.textContent = jsonDataObjects[i].info; // change this line
        list.appendChild(div);
      }

    });
  </script>