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
Post a Comment