Knockout Binding doesn't init, starts with update
data-binding, initialization, javascript, knockout.js
Solution
The `update` function always runs the first time as well.
For your `fadeVisible` the element will already be visible, so fading it in will not do anything.
For the other binding calling `slide` on it will still animate it, even though it is shown.
Some different ways that you could handle it:
- store something on the element ($data) to indicate that you are on the first pass and clear it as the end of the update (or vice-versa)
- check the visibility before sliding (as you mentioned in the comments)
Problem
I have these two bindings that use the same init code, and are bound to the same value, but they don't init the same. The first behaves normally, the second one runs its update instead of init. Here are the bindings: ``` function initToggle(element, valueAccessor) { // Initially set the element to be instantly visible/hidden depending on the value var value = valueAccessor(); $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable }; //Binding Handlers ko.bindingHandlers.fadeVisible = { init: initToggle, update: function (element, valueAccessor) { // Whenever the value subsequently changes, slowly fade the element in or out var value = valueAccessor(); ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut(); } }; ko.bindingHandlers.slideVisibleVertical = { init: initToggle, update: function(element, valueAccessor, allBindingsAccessor) { var value = valueAccessor(); //Lastest binding value var allBindings = allBindingsAccessor(); //other bindings, allows options var valueUnwrapped = ko.utils.unwrapObservable(value); var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified if (valueUnwrapped == true) $(element).show('slide', {direction: 'up'}, duration); else $(element).hide('slide', {direction: 'up'}, duration); } }; ``` Literally, same init function. Here is a fiddle showing two buttons, both bound to the same value. `fadeVisible` starts out as shown, but `slidevisibleVertical` slides in. Both animate when updating. Anyone know whats going on here?