Knockout Template

Knockout Template

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<input data-bind="value:fullName" />
<input data-bind="value: firstName" />
<span data-bind="text:fisrtName" ></span>
<span data-bind="text:lastName" ></span> ---
<span data-bind="text:fullName" ></span> ---

<input type="checkbox" data-bind="checked : computedState" > Dispose Computed </input>

JavaScript

function MyViewModel() {
    var self = this;
    this.firstName = ko.observable('Planet');
    this.lastName = ko.observable('Earth');
    this.computedState = ko.observable(false);
    
    this.fullName = ko.computed({
        read: function () {
            console.log("READ");            
            return this.firstName() + " " + this.lastName(); 
        },
        write: function (value) {
            console.log("WRITE");    
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: this,
            
        disposeWhen : function(){ return self.computedState(); }
    });
}
 
ko.applyBindings(new MyViewModel());