CODEWITHSUNDEEP
javascriptjqueryknockout.jsconfirm
Loredra L
Loredra L

Reputation: 1553

The whole page wait for confirmation from user before rendering

What I have to do is simple: User open the page, get a confirmation modal that ask he to choose A or B, then the whole page would render depend on the choice. My problem is that the page keep render ahead without waiting for user to confirm. How can I do this?

My code workflow utils.js 

callForModal()//Code that available for all pages

viewModels.js for knockout

customBindingHandler.svg = {
    init: function (element, valueAccessor) {
        // Render depending on callForModal choices here
        // call render function inside callForModal() callback does not work here
    }
}

viewModels(){
    // Promised ajax with some data loading before stuff happen
    // Put the callForModal() does not also work here
}

Upvotes: 0

Views: 209

Answers (1)

Roy J
Roy J

Reputation: 43881

Use templates. You want to render one of three pages at any time. Each page is a template. Have an observable that you set to the id of the desired template.

var vm = {
  t: ko.observable('modal-choice'),
  changeTemplate: (t) => () => vm.t(t)
};

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="modal-choice">
  Choose:
  <button data-bind="click:$data.changeTemplate('A')">A</button>or
  <button data-bind="click:$data.changeTemplate('B')">B</button>
</template>
<template id="A">
  You chose template A!
</template>
<template id="B">
  B was your choice!
</template>
<div data-bind="template: t"></div>

Upvotes: 1

Related Questions