title: What is the best approach to passing data to a custom binding handler
body: <p>I'm working on a few knockout.js binding handlers in my spare time for some current/future projects I will be doing and I was wondering what the best approach to passing multiple parameters is. <a href="http://johngafford.com/KnockoutAnimate/" rel="nofollow">Link to example bindings</a> (Not for production use)</p>
  
  <p>For example, I have a "cssAnimateVisible" binding handler that looks like this:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div data-bind="cssAnimateVisible: isCssAnimateVisible"&gt;Animation&lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>self.isCssAnimateVisible = ko.observable(false);
  </code></pre>
  
  <p>I can turn the observable off and on and it will play whatever default animation I want it to play on that element. Most of the time, this works just fine and dandy. However, if I want to change the default animation to something other than bouncing in and out I have to do this:</p>
  
  <pre><code>&lt;div data-bind="cssAnimateVisible: { observable: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'}"&gt;Animation&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I'm passing in a lot more variables since I do not want to use the default animation for this particular element. This approach is what I currently have on my project site, but I don't like passing in a variable called "observable" because that just seems to bloat up the html controls, so I have narrowed it down to this:</p>
  
  <pre><code>&lt;div data-bind="cssAnimateVisible: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'"&gt;Animation&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, it is a lot shorter than above, but it does take the other parameters out of the context of "cssAnimateVisible", which could be a potential downside due to naming conflicts with other custom bindings someone might have.</p>
  
  <p>Moreover, I thought about just passing variables like this:</p>
  
  <pre><code>&lt;div data-bind="cssAnimateVisible: { isCssAnimateVisible, 'flipInY', 'flipOutY' }"&gt;Animation&lt;/div&gt;
  </code></pre>
  
  <p>This makes it even shorter with the expense of having to know the order of the parameters being passed in.</p>
  
  <p>Lastly, I thought about just creating a lot of different binding handlers for the various animations in the animate.css library like so:</p>
  
  <pre><code>&lt;div data-bind="cssBounceVisible: isCssAnimateVisible1"&gt;Animation&lt;/div&gt;
  &lt;div data-bind="cssFlipVisible: isCssAnimateVisible2"&gt;Animation&lt;/div&gt;
  &lt;div data-bind="cssLightSpeedVisible: isCssAnimateVisible3"&gt;Animation&lt;/div&gt;
  </code></pre>
  
  <p>This approach increases the lines of code in my project along with not giving as much flexibility. Still, it is probably the shortest data-bind of them all.</p>
  
  <p>Does anyone know the best approach to handling this? I want to be consistent in my approach more than anything. Thank you!</p>