prototype tests

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

by gene

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>
<div>Document <span data-bind="text: doc"></span></div>
<div>Posting <span data-bind="text: posting"></span></div>
<button data-bind="click: update">Update</button>

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);
    this.usage = ko.observableArray([]);
    this.usage.subscribe(function(u) {
        console.log("document", self.id(), "usage", u);
    });
    
    this.toString = function() { return "Document: " + self.usage(); }
};
    
var rank = 1;
var postingId = 1;
function PostingFactory(doc) {
    Posting.prototype = doc;
    return new Posting(postingId++, rank++);
}

function Posting(id, rank) {
    var self = this;
    this.id = ko.observable(id);
    this.rank = ko.observable(rank);
    this.usage.subscribe(function(u) {
        console.log("posting", self.id(), u);
    });
                         
    this.toString = function() { return "Posting: " + self.usage(); };
}

function viewModel() {
    this.doc = ko.observable(new Document(1, 'a doc'));
    this.posting = ko.observable(PostingFactory(this.doc()));
    
    
    this.update = function() {
        this.posting().usage.push(new Date().time);
    }
    
};

ko.applyBindings(new viewModel());