Knockout Custom Bindings not working, where do they go?

[Jason Clark]

So, I'm on day two of using Durandal within the Hot Towel template and I'm already in love.  This required me learning the AMD pattern and rewriting a number of files of javascript as AMD modules, but it was a good thing to do.

I'm trying to use some basic custom KO bindings (slideVisible, fadeVisible, etc.), but I get no love from them.  I initially just included a file with nothing but these bindings (bindings.js) in the vendor Script Bundle, but that did nothing.  I've now, for testing purposes, pulled the 3 bindings I'm using and put them in the viewmodel they would be applied to, but there's still nothing happening, as in, everything shows up on the page, rather than being hidden on load like they should be.

So, stupid n00b question of the day: where should I put these custom bindings in order to get them to actually apply to the view when their composed?  Thanks in advance!

[Shaunt Kojabashian]

That's funny - I have the exact same question.

Do they need to be converted into a widget possibly?

[Rob Eisenberg]

Usually, I put them in a module and then require that module at startup. However, there may be some issues with those particular bindings, depending on what they are doing internally. I haven't used them myself, so I can't know for sure.

--
You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Rob Eisenberg,

President - Blue Spire
www.durandaljs.com

[Jason Clark]

Well, they are dependent on jQuery, so I don't know if that matters or not, but here's the code just in case:

ko.bindingHandlers.slideVisible = {

        init: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());

            $(element).toggle(value);

        },

        update: function (element, valueAccessor, allBindingsAccessor) {

            var value = valueAccessor(), allBindings = allBindingsAccessor();

            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var duration = allBindings.slideDuration || 400;

            if (valueUnwrapped == true)

                $(element).slideDown(duration);

            else

                $(element).slideUp(duration);

        }

    };

    ko.bindingHandlers.fadeVisible = {

        init: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());

            $(element).toggle(value);

        },

        update: function (element, valueAccessor, allBindingsAccessor) {

            var value = valueAccessor(), allBindings = allBindingsAccessor();

            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var duration = allBindings.fadeDuration || 400;

            if (valueUnwrapped == true)

                $(element).fadeIn(duration);

            else

                $(element).fadeOut(duration);

        }

    };

Pretty basic overall...

[Rob Eisenberg]

Well, there is nothing jumping out at me...

[Shaunt Kojabashian]

Forgive my ignorance here, but are you saying requiring it within the activate function of the shell.js?

[Jason Clark]

A quick question about this: when you put them in a module, how do you define them?  Are you just defining them as vars and returning the vars?

On Tuesday, April 9, 2013 4:21:34 PM UTC-5, EisenbergEffect wrote:

[Rob Eisenberg]

If you put the binding in a module and just require it, the code will execute as part of the require proces

[Shaunt Kojabashian]

I think it's as simple as ...

//knockout-handlers.js

define(function(require) {

});

... then in shell.js activate() 

var handlers = require('knockout-handlers');

that sound about right?

[Jason Clark]

Actually, I don’t believe they need to be required in the shell.js (unless they’re on the home page).  I just got them working by requiring them in my viewmodel definition like so:

 

define(['services/logger', 'avatar/common', 'durandal/plugins/router', 'durandal/http', 'avatar/bindings'], function (logger, avatar, router, http, bindings)

And they work!  Rob, you’re a genius!

 

Sent from Windows Mail

 

[Shaunt Kojabashian]

yea, that's right... new to amd too...thanks.

[Rob Eisenberg]

That's the way. AMD modules are cool because they are executable. If you return something, then that is the product of other's require requests. But that isn't required.

[Shaunt Kojabashian]

Do you typically include css files all at the start? or can you require those in real time as well? If so, how?

[Rob Eisenberg]

There is a css plugin for require...but I don't think it's very recommended due to cross-browser issues. If you want to give it a try, let us know what you discover.