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());
<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>
h2, h3 { font-weight: bold; } h2 { font-size: 1.25em; }