https://github.com/enpit/knockout-context-util
Module that provides utility functions for accessing a model's knockout context
https://github.com/enpit/knockout-context-util
Last synced: 10 months ago
JSON representation
Module that provides utility functions for accessing a model's knockout context
- Host: GitHub
- URL: https://github.com/enpit/knockout-context-util
- Owner: enpit
- License: mit
- Created: 2016-12-14T19:26:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-20T14:56:09.000Z (over 8 years ago)
- Last Synced: 2025-08-04T19:27:47.376Z (10 months ago)
- Language: JavaScript
- Size: 31.3 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# knockout-context-util
Module that provides utility functions for accessing a model's knockout context
## Installation
``` cli
bower install --save knockout-context-util
```
In scripts/grunt/config/bowercopy.js add this to the third-party files near the bottom of the file:
``` js
'knockout-context-util': 'knockout-context-util/knockout-context-util.js'
```
If you run grunt bowercopy now, you should see the knockout-context-helper folder in your js libs folder. Add a reference to the js file in that folder to your requirejs config in both the main.js and main-release-paths.json files:
``` js
'knockoutContextUtil': 'libs/knockout-context-util/knockout-context-util'
```
## Usage
``` js
define(['knockout-context-util'], function (kocoUtil) {
var rootContext = kocoUtil.getRoot();
var productSelector = '#productId';
var productContext = kocoUtil.getContext(productSelector);
var productViewModel = kocoUtil.getViewModel(productSelector); // === productContext.$data
});
```
### Passing your root selector to the module
If your root viewModel is not attached to the HTML body but some other element, you can pass the root selector to the module by passing a config object to the `requirejs.config` call:
``` js
requirejs.config({
paths: {
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-3.1.0.min',
/* ... */
'knockoutContextUtil': 'libs/knockout-context-util/knockout-context-util'
}
config: {
knockoutContextUtil: {
bodySelector: '#myRoot' // your custom body selector
}
}
});
```
You can then use the `getRoot` function to access the data of that particular element's context:
``` js
rootContext = kocoUtil.getRoot();
// returns the same as:
rootContext = kocoUtil.getContext('#myRoot').$data;
```
## API
### getRoot()
Returns the data of the knockout context of the root viewModel, or `undefined` if no root context was found.
### getContext(elementAccessor)
Returns the knockout context of the DOM element identified by `elementAccessor`.
Returns the first context found, if `elementAccessor` matches multiple DOM elements.
Returns `undefined` if no knockout context is found.
#### elementAccessor
A query selector string (see the [jQuery docs](https://api.jquery.com/category/selectors/) for more information about these).
### getViewModel(elementAccessor)
Returns the viewModel of the knockout context identified by `elementAccessor`.
Same as calling `getContext(elementAccessor).$data`, but does not crash if no knockout context is found.
Instead, `undefined` is returned in this case.
#### elementAccessor
A query selector string (see the [jQuery docs](https://api.jquery.com/category/selectors/) for more information about these).
### create([bodySelector])
Creates a knockout-context-util module with the given `bodySelector`, i.e. this module's `getRoot` function then returns the knockout context identified by `bodySelector`.
#### bodySelector
A query selector string (see the [jQuery docs](https://api.jquery.com/category/selectors/) for more information about these).
## License
MIT © [enpit GmbH & Co. KG](http://www.enpit.de/)