Replace static with ko template

Example on how to replace static html with knockout template. Sometimes you might require to load the page with some contents before enabling knockout on them.

by spoike

HTML

<!-- 
The element as loaded during page load.
This is the static html part
-->
<div id="replace-this" class="box" data-bind="template: {name: 'template'}">

    <p>Please wait while we're loading your stuff</p>
    <p class="note">This panel will be replaced</p>
    
</div>

<!-- 
The template to replace the contents with.
This is the knockout.js part 
-->
<script type="text/html" id="template">
    
    <p>Welcome <span class="name" data-bind="text: name"></span>!</p>
    <p>We hope you'll enjoy your stay</p>
    <p class="note2">Rerun the fiddle if you want to see the "popin" in action again.</p>
    
</script>

CSS

.box {
    border: 1px solid black;
    border-radius: 5px;
    padding: 15px;
    font-size: 20px;
    font-family: Arial, sans-serif;
    background-color: beige;
}
.name {
    font-weight: bold;
    color: green;
}
.note {
    color: red;
    font-weight: bold;
}
.note2 {
    font-size: 0.75em;
    color: brown;
    font-style: italic;
}

JavaScript

var timerTimeout = 2000; // = 2 seconds

// The view model
var VM = function() {
    this.name = "Mikey Mike";
};

// Wait before we apply bindings, to simulate ajax behavior
window.setTimeout(function() {

    ko.applyBindings(new VM());

}, timerTimeout);