javascript - Possible to create a custom if binding in Knockout -


i want create "fadeinif" custom binding. thoughts equal "fadevisible" from: http://knockoutjs.com/examples/animatedtransitions.html:

// here's custom knockout binding makes elements shown/hidden via jquery's fadein()/fadeout() methods // stored in separate utility library ko.bindinghandlers.fadevisible = {     init: function(element, valueaccessor) {         // set element instantly visible/hidden depending on value         var value = valueaccessor();         $(element).toggle(ko.utils.unwrapobservable(value)); // use "unwrapobservable" can handle values may or may not observable     },     update: function(element, valueaccessor) {         // whenever value subsequently changes, fade element in or out         var value = valueaccessor();         ko.utils.unwrapobservable(value) ? $(element).fadein() : $(element).fadeout();     } }; 

i'm pretty new custom bindings, thinking this:

ko.bindinghandlers.fadeinif = {     init: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         var value = valueaccessor();         $(element).toggle(ko.utils.unwrapobservable(value));          ko.bindinghandlers.if.init(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);     },     update: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         var value = valueaccessor();         if (ko.utils.unwrapobservable(value))             $(element).fadein();          ko.bindinghandlers.if.update(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);     } }; 

i've got "fadevisible" working, can't work 1 out, missing?

thanks suggestion. got working, missing controlsdescendantbindings option. here's result:

ko.bindinghandlers.fadeif = {     init: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {          var value = valueaccessor();         $(element).toggle(ko.utils.unwrapobservable(value));          ko.bindinghandlers['if'].init(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);         return { controlsdescendantbindings: value };     },     update: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         var value = valueaccessor();         if (ko.utils.unwrapobservable(value)) {             ko.bindinghandlers['if'].update(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);             $(element).fadein();         }         else {             $(element).fadeout(200, function () {                 ko.bindinghandlers['if'].update(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);             });         }     } }; 

Comments

Popular posts from this blog

c# - Operator '==' incompatible with operand types 'Guid' and 'Guid' using DynamicExpression.ParseLambda<T, bool> -