整個頁面在渲染前等待用戶確認

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>