lundi 17 août 2020

Can we force the controller value change to immediately reflect into the html drop down element manually without reloading the page in ember JS?

I have a situation in which I have to get the hours and minutes as input.I have used two select box element for getting hours and minutes.The Condition is that i will have a minute minutes below which the value should not exceed.For this I have used the inbuilt view in ember.I have two controller variable in my program one is bound to produce option field in the hours element, another one is for minutes.There is an observer function listening to the changes in the hours value and sets the options in the minutes element accordingly so that the resulting minutes is larger than the minimum minutes given. sample Hours option-["0","1","2",......."23"] sample minutes option-["0","5","10","15",......,"55"] For example if the minimum minutes is 30 minutes, 01.If the value in the hour element is 0 , then the minutes option should not show 0,5,10,....,25 as the result in a value smaller than 30 mins. 02.If the value in the hour element is greater than 0 , then the criteria greater than 30 mins is achieved so minutes options can be anything that is it should show every option from 0 to 55

Controller observer function to set minutes options:

AllMinuteOption=[["0","1","2",......."23"],
updateMinuteOption: Ember.observer("HourValueSelected", function() {
    var MinimumMinutes = this.get("MinimumMinutes");//minimum minute criteria
    var currentHourValueSelected= this.get("currentHourValueSelected");//The current value in selected in hour select element
    if ((currentHourValueSelected* 60) > MinimumMinutes) {
        console.log("opt" + this.get("minutesoption"));
        this.set("MinuteOption", this.get("AllMinuteOption"));
        return;
    }
    var MinimumHrs = Math.floor(MinimumMinutes / 60);
    var residualMinutes = MinimumMinutes - (crntEventFetchHour * 60);
    var sliceIndex = Math.floor(residualMinutes / 5);
    if (residualMinutes % 5 != 0) {
        sliceIndex++;
    }

    var temp = this.get("AllMinuteOption").slice(sliceIndex);
    this.set("MinuteOption", temp);
}),

This method set the minute option corresponding to the hour value selected but the change is not getting updated to the nearby minute option dynamically but eventually after selecting some other option in the minute option the values in the minute element the options is getting changed. Can someone tell me how to force the controller variable change manually to get reflected in the template?? Thanks in advance




Aucun commentaire:

Enregistrer un commentaire