聚合物:更新DOM时更改文件JSON

Question

我正在制作模态将数据添加到JSON文件中并在DOM中显示。数据已保存到文件中，但未更新DOM。我正在使用Iron-Ajax。

     <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（），但行不通。

我非常感谢您的帮助

Answer 1

好的，所以我有时间实际看计算机上的所有内容。当您尝试使用.render或.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中进行更新。

以下是有关异步的更多信息。