Template Clean/Load

Uses moment.js and limited code.

by origineil

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<div id='template-container'>  
</div>
 
<button data-bind='click: emptyTemplate'>Empty</button>
<button data-bind='click: fillTemplate'>Fill</button>

<script type="text/html" id='templateId'>
    <span data-bind='text: number'></span>      
</script>

CSS

body {
    padding-top: 80px;
}
.calendar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    clear: both;
    width: 100%;
}
.calendar li, {
    display: block;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.calendar .date {
    color: #7f7f7f;
}
.calendar:before, .calendar:after {
    content:"";
    display: table;
}
.calendar:after {
    clear: both;
}
.calendar-day, .calendar li.out-of-range, .calendar-day-event {
    height: 150px;
}
@media (max-width:768px) {
    .calendar .weekdays {
        display: none;
    }
    .calendar li {
        height: auto!important;
        border: 1px solid #ededed;
        width: 100%;
        padding: 10px;
        margin-bottom: -1px;
    }
    .calendar li .day, .calendar li .month {
        display:inline;
    }
    .calendar li.out-of-range, .calendar-day {
        display: none;
    }
    .calendar .date {
        text-align: center;
    }
}
@media (min-width:769px) {
    .calendar .date {
        text-align: right;
    }
    .calendar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        clear: both;
        width: 100%;
    }
    .calendar li {
        display: block;
        float: left;
        width: 14.2857142857%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
    }
    .calendar li .day, .calendar li .month {
        display:none;
    }
    .calendar li.out-of-range {
        background-color:#F5F5F5;
        color:#666;
    }
}

JavaScript

var vm = {

    fillTemplate: function(){
             $('#template-container').html('<div data-bind="template: {name:\'templateId\', data: $data}"></div>');
        ko.cleanNode($('#template-container')[0]);
        ko.applyBindings({number: ko.observable(Math.random())},$('#template-container')[0])
    },
    emptyTemplate: function(){
      $('#template-container').empty();
    }
}
      
ko.applyBindings(vm)