Can’t seem to access any parameters except allBindings in custom binding within event registered with registerEventHandler

Question

I have a knockout custom binding that wraps functionality to an image crop library (https://github.com/fengyuanchen/cropper .) I’m catching the cropend.cropper event to (eventually) attach the cropped output to an observable.

I’m using:

knockout 3.3
jquery 2.1.4
cropper 2.0

Here is the binding handler:

    ko.bindingHandlers.cropper = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var $element = $(element);
            var value = ko.unwrap(valueAccessor());
            var a = 1;
            ko.utils.registerEventHandler(element, "cropend.cropper", function (event) {
                var previewOutputObservable = allBindings.get('previewOutput');
                var valueAccessorFromAllBindings = allBindings.get('cropper');
                var b = 1;
            });
            $element.cropper(value);
        },
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var $element = $(element);
            var value = ko.unwrap(valueAccessor());
            var c = 1;
        }
    };

And here is the element I'm binding to:

<img class="img-responsive" data-bind="attr: {'src': sampleObservable}, cropper: { aspectRatio: 16/9 }, previewOutput: cropPreview "/>

When I put a breakpoint (in chrome) on var b = 1; none of the parameters in the init are defined except allBindings. I’ve seen several examples use this general pattern though (e.g. here). What am I doing wrong?

Michael Best · Accepted Answer · 2015-11-12T21:39:00.773

1

The outer variables are accessible through a closure context. Chrome tries to optimize the context by only including variables that are actually accessed in the closure code. Since element wasn't accessed in your code, it's not part of the context. This is a good feature as it means that variables that aren't used in any closure can be safely disposed.

edited Nov 12 '15 at 21:39

answered Nov 12 '15 at 21:14

Michael Best

16,623
1
37
70

score 0 · Answer 2 · answered Nov 12 '15 at 18:11

This is either an issue with the Chrome debugging tools or a 'feature' of knockout.

Before var b = 1 I added the line var newValue = element. I put a breakpoint on that line and lo and behold the element parameter now has values.

It seems like the variables aren't initialized until they're used in the current context.

Can’t seem to access any parameters except allBindings in custom binding within event registered with registerEventHandler

2 Answers2