更新

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中有效。但它现在似乎不起作用，这很好，但我需要一个替代方案。

我考虑过的一些替代方案：

在相同的DOM范围内设置iron-ajax元素并设置' 用户登录后触发的URL xhr请求。我不确定这是否有效。
将列表包装在自定义元素中并使用每个chrisW的答案都是铁元查询。

这些选项可怕。我无法相信没有更简单的方法来完成这一壮举。我如何有条件地根据用户输入获取数据，动态地向页面添加铁列表（或更新已存在的那个）？这个用例真的没有API吗？

更新

感谢您的回答。事实证明我的原始代码实际上工作正常：它实际上是一个构建过程问题。出于某种原因，当我通过bower安装项目依赖项时，没有安装iron-list。我拿出了硫化的导入品（也不一定包含了炼铁列表的参考号）并直接导入了所有元素，然后我得到了404并弄清楚发生了什么。

Answer 1

我认为，对于最佳做法，您应该使用/** * Created by huagu on 2015/12/21. */ import * as ReactDOM from "react-dom"; import * as React from "react"; import FloatButton from "./FloatButton"; window.onload = function (event:Event) { var bd = document.querySelector('#bd'); var style:__React.CSSProperties = { width:'80px', height:'40px', background:'blue', position:'absolute', top:'100px', left:'10px' } var str:__React.CSSProperties = ''; var num:number = ''; var c = <span style={{fontSize:'14px'}}>button</span> var props = { content:c, click:function(){ console.log("FloatButton clicked"); }, style:style, allowSeriesClick:false, } ReactDOM.render(<FloatButton {...props}></FloatButton>, bd); }来重新提供此元素的ID。无论如何，当您获得填充this.$.historyList的数据时，您应该使用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>

此示例使用自动执行的ajax调用并填充<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>，而无需创建自定义元素。

有关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')

编辑，因为您不想创建自定义聚合物元素

Source Code

  <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>

如何动态填充铁列表元素

更新

2 个答案:

修改

编辑，因为您不想创建自定义聚合物元素