a comprehensive implementation of an observable dictionary in KnockoutJS
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Updated README Jan 24, 2012
demo.html Override toJSON to output in dictionary format. Jan 13, 2012
ko.observableDictionary.js added removeAll functionality May 9, 2013

README.md

To use the knockout observable dictionary you simply need to reference knockout and then this

<script type='text/javascript' src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script type='text/javascript' src="https://raw.github.com/jamesfoster/knockout.observableDictionary/master/ko.observableDictionary.js"></script>

Then pass a javascript object to ko.observableDictionary() as follows.

var person = {
    name: 'Joe Bloggs',
    height: 180,
    'hair colour': 'brown'
};

var viewModel = {
    person: new ko.observableDictionary(person)
};

ko.applyBindings(viewModel);

To loop over the items in the dictionary simply data bind to the items property. Each item has a key property and a value property

<ul data-bind="foreach: person.items">
    <li>
        <span data-bind="key"></span>
        <span data-bind="value"></span>
    </li>
</ul>

You can also data bind to specific elements within the dictionary using the method get

<label>Name: <input data-bind="person.get('name')" /></label>

You can even data bind to elements which don't exist yet. In this case, if you update the value it will add a new item to the dictionary.

<label>Company: <input data-bind="person.get('company')" /></label>

To set a value on the dictionary in code use either:

  • the set method: viewModel.person.set('hair colour', 'blue');. or
  • the get method: viewModel.person.get('hair colour')('blue');.

The obersvableArray methods indexOf, remove, sort and push have also been overridden to behave as expected with dictionaries e.g. viewModel.person.remove('height') and viewModel.person.indexOf('hair colour')

Enjoy