<h2>KO's Native Templating Performance Test</h2>
        Testing the performance of binding data when binding directly versus binding through a template binding.
        Open the console and call the following:
        <ul>
                <li><code>viewModel1.changeData()</code></li>
                <li><code>viewModel2.changeData()</code></li>
        </ul>


        <hr />


        <h3>Not Using Template Binding</h3>
        <div id="noTemplateBinding">
                BirthDate: <span data-bind="text: birthDate" ></span>
                <br />
                AnniversaryDate: <span data-bind="text: anniversaryDate" ></span>
                <br />
                ParoleDate: <span data-bind="text: paroleDate" ></span>
                <br />
        </div>


        <hr />


        <h3>Using Template Binding</h3>
        <div id="yesTemplateBinding">
                <span data-bind="template: { name: 'birthDate-template', data: birthDate }"></span>
                <br />
                <span data-bind="template: { name: 'anniversaryDate-template', data: anniversaryDate }"></span>
                <br />
                <span data-bind="template: { name: 'paroleDate-template', data: paroleDate }"></span>
                <br />
        </div>


        <script type="text/html" id="birthDate-template">
                BirthDates: <span data-bind="text: $data" />
        </script>

        <script type="text/html" id="anniversaryDate-template">
                AnniversaryDate: <span data-bind="text: $data" />
        </script>

        <script type="text/html" id="paroleDate-template">
                ParoleDate: <span data-bind="text: $data" />
        </script>

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>

Setup JS

var ViewModel = function() {
    
        var self = this;
    
        //---Properties---
        self.birthDate = ko.observable( "July 1" );
        self.anniversaryDate = ko.observable( "July 2" );
        self.paroleDate = ko.observable( "July 3" );
    
    
        //---Behavior---
        self.changeData = function() {
    
                var now = new Date();
    
                self.birthDate( now.getTime() );
                self.anniversaryDate( now.getTime() );
                self.paroleDate( now.getTime() );
        }
    
    };
    
    
    
    
    //---ACTIVATE KO---
    var viewModel1 = new ViewModel(); 
    ko.applyBindings( viewModel1, document.getElementById(  "noTemplateBinding" ) );
    
    //---ACTIVATE KO---
    var viewModel2 = new ViewModel(); 
    ko.applyBindings( viewModel2, document.getElementById( "yesTemplateBinding" ) );

Teardown JS

Test cases

Test #1

Title *

Async

Code *viewModel1.changeData()

Test #2

Title *

Async

Code *viewModel2.changeData()

Test case details

Preparation Code

Test cases

Test #1

Test #2