How to re-direct to a print template using Knockout js - templates

Question

I'm using templates in my view and I'd like to direct the user to a print template. Common usage:
<div data-bind="template: { name: 'print' }"></div>
but I want this script to appear alone and not with other content.
Is it possible to go to my print script instead of pulling the script into a div, which is what the code above does. Thank you.

Answer 1

You could put a boolean around the "normal" content that hides everything else whenever the print template is active.
<div data-bind="visible: noprint()">main site</div>
Redirect to a different file that holds the print layout with its own styling.
Create your page as such that the print-css actually renders the page as expected. Make sure the print styles are always at the bottom of your css
#media print {
body {
color: #000;
background-color: #fff;
}
}
A bit more advanced is working with components, you could use the same data for displaying everything you need but when the user expects a printable view just switch out the screenlayout-component to the printlayout-component
screen
print
<div data-bind="component: layoutType"></div>

Answer 2

Here's what I ended up doing...
var viewModel = {
selectedTemplate: ko.observable('ViewContent'),
subTemplate: function (item) {
this.selectedTemplate(item);
},
goBack: function () {
this.selectedTemplate('ViewContent');
},
printLandscape: function () {
this.selectedTemplate('PrintContent');
alert("Please change page orientation to Landscape");
javascript: window.print();
},
}
ko.applyBindings(viewModel);
.print {
margin: 0px;
padding: 0px;
width: 900px; /* or width: 9.5in; */
height: 670px; /* height: 7in; */
clear: both;
page-break-after: always;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="getContent" type="text/html">
<!-- ko if: ($root.selectedTemplate() == "ViewContent") -->
<div data-bind="template: { name: 'viewContent' }"></div>
<!-- /ko -->
<!-- ko if: ($root.selectedTemplate() == "PrintContent") -->
<div data-bind="template: { name: 'printContent' }"></div>
<!-- /ko -->
</script>
<script id="viewContent" type="text/html">
<div>Here's the view or display content</div>
Print
</script>
<script id="printContent" type="text/html">
<div>Print | Back</div>
<div class="print">Here's the print content</div>
</script>
<div data-bind="template: { name: 'getContent' }"></div>