afterRender/subscribe with KnockoutJS

by ryanwfiorini

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div data-bind="template: {name: 'testTemplate', foreach: people, afterRender: doSomething, beforeRemove: handleRemove}"></div>
    
<script id="testTemplate" type="text/html">
    <div class="items" data-bind="text: full() + ' updated at: ' + Date()"></div>
</script>

<button data-bind="click: loadInitialData">Load Initial Data</button>
<button data-bind="click: loadDeleteData">Load Data with Delete</button>
<button data-bind="click: loadAddData">Load Data with Addition</button>

CSS

.items {border-bottom: 1px solid blue;}

JavaScript

var data = [
    { id: 0, first: "Not", last: "Updated" },
    { id: 1, first: "Bob", last: "Smith" },
    { id: 2, first: "Jimmy", last: "Jones" },
    { id: 3, first: "Delete", last: "Me" }
];

var deleteData = [
    { id: 0, first: "Not", last: "Updated" },
    { id: 1, first: "Bob", last: "Smith" },
    { id: 2, first: "Jimmy", last: "Jones" }
];

var addData = [
    { id: 0, first: "Not", last: "Updated" },
    { id: 1, first: "Bob", last: "Smith" },
    { id: 2, first: "Jimmy", last: "Jones" },
    { id: 3, first: "Delete", last: "Me" },
    { id: 4, first: "Add", last: "Me" }
];

var Person = function(data) {
    this.id = data.id;
    this.first = ko.observable(data.first);
    this.last = ko.observable(data.last);
    this.full = ko.computed(function() {
        return this.first() + " " + this.last();
    }, this);        
};


var dataMappingOptions = {
    key: function(data) {
        return ko.utils.unwrapObservable(data.id);        
    },
    create: function(options) {
        return new Person(options.data);
    }    
};

var viewModel = {
    doSomething: function(){alert("data changed");},
    handleRemove: function() {alert("something was removed");},
    people: ko.mapping.fromJS([]),
    loadInitialData: function() {
        ko.mapping.fromJS(data, dataMappingOptions, viewModel.people);        
    },
    loadDeleteData: function() {
        ko.mapping.fromJS(deleteData, dataMappingOptions, viewModel.people);        
    },
    loadAddData: function() {
        ko.mapping.fromJS(addData , dataMappingOptions, viewModel.people);  
    }        
};

ko.applyBindings(viewModel);