Help with custom event binding

[luv2hike]

I cannot figure out nor find online how to pass the viewModel reference and the event object to a binding handler for a custom event.
In the following Fiddle, I get an error that tapCounter is not a function of this when in the fast click custom event handler.  It works fine for the built-in standard click one.

http://jsfiddle.net/luv2hike/F3YbB/8/

What am I either doing wrong or forgetting to do?
Thanks.

[Brad Grant]

Thanks.  I see what you mean when I look at the docs but I've tried every combination of syntax and cannot seem to make it happy.  I cannot find any examples that use all 5.  Do I really need all 5 in my case?  I'm really unsure what this line does:

  return ko.bindingHandlers.event.init.call(this, element, newValueAccessor, allBindingsAccessor, viewModel);

I got this from another forum post to get started but guess I'm not smart enough to just get it.  I'd really appreciate being educated to understand.

On Fri, Feb 7, 2014 at 3:36 PM, Michael Best <mb...@dasya.com> wrote:

The fifth parameter to binding handlers is bindingContext, which you're missing.

-- Michael

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/NEl4Rfv_66A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[luv2hike]

I've added the bindingContext parameter to pass through but had to remove "this" and I still get the error when clicking on the fast button that tapCounterR is not a function and h.apply is not a function.
If I replace this with viewModel in the doSomethingFast function, it works, but then it's tied to the one model and I still get the new h.apply not a function error.

http://jsfiddle.net/luv2hike/F3YbB/18/

[luv2hike]

Updated fiddle to fix some typo syntax errors and comment the  parts in question:

http://jsfiddle.net/luv2hike/F3YbB/19/

[Michael Best]

Regarding whether to use "call" or not, it doesn't matter because the event.init function doesn't use the "this" value.

So either of the following is fine.

        return ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);

        return ko.bindingHandlers.event.init.call(this, element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);

-- Michael

P.S. I noticed this fiddle has the incorrect "boxGrayed" function.

[luv2hike]

Thanks again.  I've tested the 1st line you show below for the return and it does work fine.
I've also fixed the boxGrayed function.  Don't know how that snuck back in there from an old fiddle.
I still get the error if I uncomment line 15 and comment out line 16 when clicking the right "fast" button.

http://jsfiddle.net/luv2hike/F3YbB/20/

[Michael Best]

The FastButton class sets up the event handler, so the event binding call doesn't actually need to be there since it's not doing anything anyway. So here's what your binding needs to be like:

ko.bindingHandlers.fastClick = {

    'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var handler = function(event) {

            var $data = bindingContext.$data;

            valueAccessor().call($data, $data, event);

        }

        new FastButton(element, handler);

    }

};

http://jsfiddle.net/mbest/F3YbB/21/

-- Michael

[luv2hike]

Michael,

Thanks for your help!  I believe the fastClick binding is working beautifully now for allowing touch devices to perform fast without the annoying "ghost clicks."
I've also rewritten the problem page's bindings and model to be hopefully more efficient.  It had turned into a cluster and I've learned a lot lately working with you and writing more custom binding handlers myself.
The latest is at this fiddle:

http://jsfiddle.net/luv2hike/G68BU/9/

I'd love critique and constructive feedback as to how it could be improved.  It's pretty easy to see what the goal of it to do is when playing with it.

Brad

[luv2hike]

A final fiddle with all items combined (fastClick custom binding and the rewritten hopefully efficient checkbox replacements for mobile):

http://jsfiddle.net/luv2hike/G68BU/10/