整个页面在渲染前等待用户确认

Question

我要做的只是简单的：用户打开页面，得到确认模式，要求他选择A或B，然后整个页面将呈现取决于选择。我的问题是，页面不需要等待用户确认就可以继续渲染。我怎样才能做到这一点？

我的代码工作流程 utils.js

callForModal()//Code that available for all pages 

viewModels.js淘汰赛

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 
} 

Answer 1

使用templates。您想随时渲染三个页面中的一个。每个页面都是一个模板。有一个可观察的，你设置为所需模板的ID。

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>