Моделът Bootstrap не се затваря правилно, когато се използва с knockout js

Използвам нокаут с bootstrap js.

Моето изискване:

  • Създавам HTML формуляр и направих обвързване на данни с помощта на нокаут.
  • След като изпратя този формуляр, показвам съобщение на потребителя в режим на първоначално зареждане.
  • При затваряне на този модал трябва да нулирам HTML формата. И така, при щракване върху бутона за затваряне I и извършване на обвързване с щракване и извикване на метод. По-долу е фрагментът на този метод.

// Re-setting the observable  to default value
me.addStudentForClass(null);
me.parents=ko.mapping.fromJS(new parentInfoModel(undefined));
me.localGuardian=ko.mapping.fromJS(new localGuardian(undefined));
me.lastSchoolEducation=ko.mapping.fromJS(new lastSchoolEducation(undefined));
// Closing bootstrap Modal
$('modal-id').modal('hide');
// Cleaning the knockout node , to reflect the reset change 
ko.cleanNode($('#add-student')[0]);
// and binding the view model 
ko.applyBindings(app.mainViewModel, $('#add-student')[0]);

Ако не използваме под два реда код, тогава модалът работи добре и модалът се затваря при щракване върху бутона за затваряне

ko.cleanNode($('#add-student')[0]);
ko.applyBindings(app.mainViewModel, $('#add-student')[0]);

Но трябва да използвам горните два реда код, защото той трябва да нулира моя формуляр.

Ако се забавим с почистването на възела, той работи добре.

function saysomething(){
			ko.cleanNode($('#add-student')[0]);
			ko.applyBindings(app.mainViewModel, $('#add-student')[0]);
     }
     setTimeout(saysomething, 500);	}

Моля, помогнете ми с това. Не искам да използвам setTimeout. И моля, предложете най-добрата практика за това.

Благодаря ти


javascript user-interface twitter-bootstrap user-experience knockout.js
person Priyank Sinha    schedule 15.09.2019    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Вместо да използвате setTimeout, можете да слушате за събитието hidden:

$('#modal-id').on('hidden.bs.modal', function (e) {
  ko.cleanNode($('#add-student')[0]);
  ko.applyBindings(app.mainViewModel, $('#add-student')[0]);
})

Вижте документацията на Bootstrap за обработка на модални събития.

person Michael Crenshaw    schedule 16.09.2019