2

我正在制作一个模式来将数据添加到 json 文件并将其显示在 DOM 中。数据保存到文件中，但 DOM 没有更新。我正在使用铁阿贾克斯。

     <div>
         <iron-ajax 
            auto
            url="areas.json"
            handle-as="json"
            last-response="{{response}}"
            on-response="responseHandler" 
          ></iron-ajax> 

          <div class="modal"></div>

        <div class="layout vertical">        
            <div class="layout horizontal">
                <template class="" id="esquema" is="dom-repeat" items="{{response}}" as="item">
                    <div class$="iron-flex {{item.type}}">{{item.name}}</div>
                </template>
            </div>
         </div>
    </div>

我没有放模态代码，但它确实可以保存和调用函数：

    addData: function(){
            var selectedItem = this.options[this.selectedIndex];            
            nuevo.push({"name": this.$.numberArea.value, 
                        "level": "1", 
                        "type": selectedItem.area});
            this.$.numberArea.value = null;
            this.$.areaSelect.selected = null;    
        },

尝试在该函数中更新 id="esquema"。我做了这个.$.esquema.render()，但它不起作用。

非常感谢您的帮助

4

1 回答 1

0

好的，所以我有时间实际查看计算机上的所有内容。当你尝试.renderor.generateRequest时，你是在dom-repeat模板上做的。需要在iron-ajax元素上完成。所以，你会做这样的事情：

<iron-ajax 
    auto
    id="ajaxRequest"
    url="areas.json"
    handle-as="json"
    last-response="{{response}}"
    on-response="responseHandler"></iron-ajax>

然后，您将this.$.ajaxRequest.generateRequest();像这样添加到您的函数中：

addData: function(){
    var selectedItem = this.options[this.selectedIndex];            
    nuevo.push({"name": this.$.numberArea.value, 
                "level": "1", 
                "type": selectedItem.area});
    this.$.numberArea.value = null;
    this.$.areaSelect.selected = null;
    this.$.ajaxRequest.generateRequest();
},

在您的 上responseHandler，我假设它目前看起来与此类似：

responseHandler: function(d){
    this.whereDataIsStored = d.detail.response;
}

你应该在这里做的是添加一个异步调用，让 Iron-ajax 每隔一段时间重复一次。该时间以毫秒为单位设置，因此您要添加以下内容：

responseHandler: function(d){
    this.whereDataIsStored = d.detail.response;
    this.async(function(){
        this.$.ajaxRequest.generateRequest();}, 5000);
},

这样做是将您的数据存储在一个属性中，然后每 5000 秒运行一次异步请求以生成新的数据请求。该数据应在您的 dom-repeat 中更新。

这是有关async的更多信息。

于 2017-03-01T20:58:51.773 回答