如何使javascript流等到元素完全呈现

时间:2016-01-20 13:22:57

标签: javascript jquery html ajax sapui5

 test.view.js

        timeDBox = new sap.ui.commons.DropdownBox({layoutData: new sap.ui.layout.GridData({linebreak: true}),
             change: function(oEvent){
              oController.getKeyEqChart();
             },
            }),

          new sap.ui.core.HTML({
                content: "<div id=\"chart1\"></div>",
                afterRendering: function(e){
                 console.log("chart1 create"+timeDBox.getValue());
                 chart1DivReady = true;
                 oController.getchart();

                }
            })       
          test.controller.js             
          onInit: function() {
      var modelDataEvent = {"genericTableModel":[{"xtime":"1"},{"xtime":"2"},{"xtime":"3"},{"xtime":"4"},{"xtime":"5"},{"xtime":"8"},{"xtime":"10"}]}
      var oTemplate11 = new sap.ui.core.ListItem({text : "{xtime}", key : "{xtime}"});
      timeDBox.setModel(new sap.ui.model.json.JSONModel(modelDataEvent));
      timeDBox.bindItems("/genericTableModel", oTemplate11);
      timeDBox.getModel().refresh();          
      this.getchart();
        },            
        getchart: function(){            
        var jsonObjToSend = {} ;
      jsonObjToSend["dialogue"] = "terminal";
      jsonObjToSend["cid"] = "key_equipment ";
      var srachmap = {} ;
      srachmap["xtime"] =  timeDBox.getValue();
      jsonObjToSend["search"] =  srachmap; this.doAjax("/uri/uri",jsonObjToSend).done(this.updateKeyEqChart);        
        },
    updateKeyEqChart: function(modelData) {    
  var svg = d3.select("#chart1").append("svg")
   1) if i call getchart method from onInit, chart1 id is not created when executing this method
  2) if i call getchart chart from oController.getchart() at that time timeDBox.getValue() value is not created which is required to get chart data
 },     

我在我的应用程序中使用了一个下拉列表,该列表是从数据库中填充的。

在下拉列表填充后发生以下事情:

  1. 填充下拉列表后,我使用下拉列表的值通过对数据库执行另一个ajax调用来呈现图表。
  2. 如果流量到达那里时没有填充下拉列表,那么稍后图表不会被渲染,但是随着时间的推移,下拉列表将呈现为ajax,我从下拉列表中发送param为空,因为下拉列表不是准备好了。
  3. 那么如何使控件等到下拉列表被填充然后进行图表调用。

1 个答案:

答案 0 :(得分:1)

我并非100%确定我理解您的问题,而且代码示例几乎不可读也无济于事。

但我认为onInit可能不是您正在寻找的生命周期钩子。

如果是一次性交易,我会使用 onAfterRendering

onAfterRendering: function() {
// Code
}

如果每次导航到此页面都必须执行此操作,那么我将在onInit函数中添加 onAfterShow / onBeforeShow 委托。

onInit: function () {

        view.addEventDelegate({

/**
 * use either or in your case
 */
            onAfterShow: function (oEvt) {
                // If you use a busy dialog, you want to close it here
            },

            onBeforeShow: function (oEvt) {

            }

        });
    },

希望这有帮助。