https://github.com/jamesfoster/knockout.observableDictionary

a comprehensive implementation of an observable dictionary in KnockoutJS
https://github.com/jamesfoster/knockout.observableDictionary

Last synced: 2 months ago
JSON representation

a comprehensive implementation of an observable dictionary in KnockoutJS

• Host: GitHub
• URL: https://github.com/jamesfoster/knockout.observableDictionary
• Owner: jamesfoster
• Created: 2012-01-11T22:06:31.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2017-10-11T15:52:08.000Z (almost 7 years ago)
• Last Synced: 2024-08-02T01:08:20.952Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 185 KB
• Stars: 87
• Watchers: 5
• Forks: 21
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-knockout - Observable Dictionary - An implementation of an observable dictionary (Plugins and libraries)

README

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

    

    

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

    


        


            

            

        

    


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

    Name: 

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.

    Company: 

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