KO observableDictionary

Using KO, and an observeable dictionary that will update the ui when the dictionary has been updated from a backend service.

HTML

<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

<span data-bind="html:dict.get('foo')" />

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

// Modified:
//amd enabled version of 
//Knockout Observable Dictionary
// (c) James Foster
// License: MIT (http://www.opensource.org/licenses/mit-license.php)


function DictionaryItem(key, value, dictionary) {
            var observableKey = new ko.observable(key);

            this.value = new ko.observable(value);

            this.key = new ko.computed({
                read: observableKey,
                write: function (newKey) {
                    var current = observableKey();

                    if (current == newKey) return;

                    // no two items are allowed to share the same key.
                    dictionary.remove(newKey);

                    observableKey(newKey);
                }
            });
        }

        ko.observableDictionary = function (dictionary, keySelector, valueSelector) {
            var result = {};

            result.items = new ko.observableArray();

            result._wrappers = {};
            result._keySelector = keySelector || function (value, key) { return key; };
            result._valueSelector = valueSelector || function (value) { return value; };

            if (typeof keySelector == 'string') result._keySelector = function (value) { return value[keySelector]; };
            if (typeof valueSelector == 'string') result._valueSelector = function (value) { return value[valueSelector]; };

            ko.utils.extend(result, ko.observableDictionary['fn']);

            result.pushAll(dictionary);

            return result;
        };

        ko.observableDictionary['fn'] = {
            remove: function (valueOrPredicate) {
                var predicate = valueOrPredicate;

                if (valueOrPredicate instanceof DictionaryItem) {
                    predicate = function (item) {
                        return item.key() === valueOrPredicate.key();
                    };
                }
                else if (typeof valueOrPredicate != "function") {
                    predicate...