Perf Tip #3 - All bindings fire together

http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<input type="checkbox" data-bind="checked: showPlaylist" /> Show Playlist

<hr/>

<h2>Bindings in the same data-bind</h2>
<div data-bind="visible: showPlaylist, template: { name: 'playlistTmpl', data: playlist }"></div>

<hr/>
    
<h2>Bindings on different elements</h2>
<div data-bind="visible: showPlaylist">
    <div data-bind="template: { name: 'playlistTmpl', data: playlist }"></div>
</div>


<script id="playlistTmpl" type="text/html">
    <h3 data-bind="text: name"></h3>
    <ul data-bind="foreach: tracks">
        <li data-bind="text: name() + ' rendered at: ' + Date()"></li>
    </ul>
</script>

CSS

h2, h3 { font-weight: bold; }
h2 { font-size: 1.25em; }

JavaScript

var ViewModel = function() {
  this.showPlaylist = ko.observable(true);
  
  this.playlist = {
      name: ko.observable("My Playlist"),
      tracks: ko.observableArray([
        { name: ko.observable("Track 1") },
        { name: ko.observable("Track 2") },
        { name: ko.observable("Track 3") },
        { name: ko.observable("Track 4") }
     ])
  };   
}

ko.applyBindings(new ViewModel());