james-voth / knockout.observabledictionary Goto Github PK

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