How to defer observable updating?

How can I defer evaluation of a view page until it is displayed?

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/mbest/knockout-deferred-updates/master/knockout-deferred-updates.js"></script>
<table border="3" cellpadding="2">
    <tr>
        <th>Lists</th>
        <th>Documents</th>
    </tr>
    <tr>
        <td class="list">
            <ul class="lists" data-bind="foreach: views">
                <li data-bind="text: label, click: $parent.selectedView"></li>
            </ul>
        </td>
        <td class="detail"  data-bind="with: selectedView">
            <div data-bind="foreach: pageList">
                <div class="pageButton" data-bind="text: $data, click: $parent.goToPage"></div>
            </div>
            <ul class="items" data-bind="foreach: rows">
                <div><span data-bind="text: id"></span> <span data-bind="text: title"></span></div>
            </ul>
 
        </td>
    </tr>
</table>

CSS

.document {
    display: inline;
    margin-right: 10px;
    text-decoration: none;
}

body {
    font-family: sans-serif;
    font-size: 10pt;
}

.lists > li {
    cursor: pointer;
}

.pageButton {
    border: 1px solid blue;
    margin: 4px;
    display: inline;
    padding: 2px;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.items {
    padding: 6px;
    border: 1px solid grey;
    margin: 6px;
}

td {
    padding: 6px;
}

JavaScript

function Document(id, title) {
    var self = this;
    this.id = ko.observable(id);
    this.title = ko.observable(title);
}

function PaginatedView(label, items, size) {
    var self = this;
    
    this.label = ko.observable(label);
    
    // List of all items to display
    this.list = ko.observableArray(items);
    
    // List that contains the items on the current page
    //this.rows = ko.observableArray([]);
    
    this.pageSize = ko.observable(size || 5);
    this.pageIndex = ko.observable(0);
   
    var size = self.pageSize();
        var start = self.pageIndex() * size;
    
    self.rows=function(){
        ko.computed(self.list.slice(start, start + size));    }
    
    this.maxPageIndex = ko.computed(function() {
        return Math.ceil(this.list().length / this.pageSize()) - 1;
    }, this);
    
    this.pageList = ko.computed(function() {
        var pages = [];
        for (var p = 0; p <= self.maxPageIndex(); p++)
            pages.push(p+1);
        
        return pages;
    });
    
    this.goToPage = function(p) {
        p--;
        if (p>=0 && p<=self.maxPageIndex())
            self.pageIndex(p);
    }
    
};

var id = 1;
var docs1 = [
    new Document(id++, 'first doc'),
    new Document(id++, 'second doc'),
    new Document(id++, 'third doc'),
    new Document(id++, 'fourth doc'),
    new Document(id++, 'fifth doc'),
    new Document(id++, 'sixth doc'),
    new Document(id++, 'seventh doc'),
    new Document(id++, 'eighth doc'),
    new Document(id++, 'ninth doc'),
    new Document(id++, 'tenth doc')
    ];
    
var docs2 = [
    new Document(id++, 'eleventh doc'),
    new Document(id++, 'twlevth doc'),
    new Document(id++, 'thirteenth doc'),
    new Document(id++, 'fourteenth doc'),
    new Document(id++, 'fifteenth doc'),
    new Document(id++, 'sixteenth doc'),
    new Document(id++, 'seventeenth doc'),
    new Document(id++, 'eighteenth doc'),
    new Document(id++, 'nineteenth doc'),
    new Document(id++, 'twentieth...