Hi Experts,
I need some explanation about Model data binding in MVC architecture
I just started implementing very good blog return by Chandra Sekhar using standard SAP UI5 MVC project
Creating SAPUI5 Applications based on Public JSON APIs or Web Services
Project is simple I have 1 controller and 1 Page which are directly linked
In Controller onInit Method I created my model using the following code
var oModel = new sap.ui.model.json.JSONModel();
// Get the Weather info in JSON format using following key
// In the key value we can get from the website after registration
var url = "proxy/http/api.wunderground.com/api/Your_Key/conditions/forecast/q/autoip.json";
//Ajax call wiht callback funciton and JSONP data type
$.ajax({
url:url,
jsonpCallback: 'getJSON',
contentType: 'application/json',
datatype: 'jsonp',
success: function(data,textStatus,jqXHR){
oModel.setData(data);
sap.ui.getCore().setModel(oModel,"uma");
}
});
I don't have any issue in creating Model and using the Model Data if I directly using the binding for any UI control
sample UI control code is as follows
//Creating Label and TextView to Display City
var oLabelCity = new sap.ui.commons.Label({
id:"L-City",
text:'City'
});
var oTFCity = new sap.ui.commons.TextField({
id:'TF-City',
tooltip:'City',
editable: false,
value:'{uma>/current_observation/display_location/full}',
width:'300px'
});
I am able display the City Name from JSON Model
But if want to modify the data as mentioned in the Chandrasekhar Blog for temperature.
In the application, we want to display temperature with ºC symbol. For that purpose, first we need to get the
temperature value and then append symbol to it.
If I use the following thing I am getting error saying invalid oModel
var tempstring = oModel.getProperty("/current_observation/temp_c");
so I used the following code
Temp = sap.ui.getCore().getModel("uma").getProperty("/current_observation/temp_c");
Temp = Temp + "\u2103";
still I am getting same error message
so solution what I found is
I placed button in view and I written press even for that
var oButton = new sap.ui.commons.Button({
text:"GetData",
press:function(){oController.getTemparature()}
});
and this function was implemented in the following way
getTemparature: function(){
var Temp;
if (sap.ui.getCore().hasModel()){
Temp = sap.ui.getCore().getModel("uma").getProperty("/current_observation/temp_c");
Temp = Temp + "\u2103";
}
else{
Temp = "noModel";
}
//alert(Temp);
sap.ui.getCore().byId("TF-Temparature").setValue(Temp);
//return Temp;
}
after page displayed if I click on the button I am able to see the value.
Here I understood one thing is
sap.ui.getCore().getModel("uma").getProperty("/current_observation/temp_c");
is available after page displayed.
After page displayed sap.ui.getCore().getModel("uma"). will be available and I can access the model and I can do the modifications
thinking same I called "getTemparature() function in onAfterRending function as follows
onAfterRendering: function() {
this.getTemparature();
},
but when I refresh or first time I am getting "noModel" in TextField ( Because of the logic in function )
Now my question is what is the best way of implementing this logic
Can anybody let me know how can I access model during the page display
How can I access model in view.
If anybody can explain the binding concepts in MVC would greate
Thanks
Uma