Каков наилучший подход к передаче данных в пользовательский обработчик привязки

Я работаю над несколькими обработчиками привязки knockout.js в свободное время для некоторых текущих / будущих проектов, над которыми я буду работать, и мне было интересно, каков наилучший подход к передаче нескольких параметров. Ссылка на примеры привязок (не для производственного использования)

Например, у меня есть обработчик привязки cssAnimateVisible, который выглядит следующим образом:

HTML:

<div data-bind="cssAnimateVisible: isCssAnimateVisible">Animation</div>

Javascript:

self.isCssAnimateVisible = ko.observable(false);

Я могу выключить и включить наблюдаемое, и он будет воспроизводить любую анимацию по умолчанию, которую я хочу, чтобы она воспроизводилась на этом элементе. В большинстве случаев это работает отлично и изящно. Однако, если я хочу изменить анимацию по умолчанию на что-то другое, кроме подпрыгивания, я должен сделать это:

<div data-bind="cssAnimateVisible: { observable: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'}">Animation</div>

Как видите, я передаю гораздо больше переменных, так как не хочу использовать анимацию по умолчанию для этого конкретного элемента. Этот подход - то, что у меня в настоящее время есть на сайте моего проекта, но мне не нравится передавать переменную с именем "наблюдаемая", потому что это просто, кажется, раздувало элементы управления html, поэтому я сузил ее до следующего:

<div data-bind="cssAnimateVisible: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'">Animation</div>

Как вы можете видеть, он намного короче, чем указано выше, но он действительно выводит другие параметры из контекста «cssAnimateVisible», что может быть потенциальным недостатком из-за конфликтов имен с другими пользовательскими привязками, которые у кого-то могут быть.

Более того, я думал о передаче таких переменных:

<div data-bind="cssAnimateVisible: { isCssAnimateVisible, 'flipInY', 'flipOutY' }">Animation</div>

Это делает его еще короче за счет необходимости знать порядок передаваемых параметров.

Наконец, я подумал о том, чтобы просто создать множество разных обработчиков привязок для различных анимаций в библиотеке animate.css, например:

<div data-bind="cssBounceVisible: isCssAnimateVisible1">Animation</div>
<div data-bind="cssFlipVisible: isCssAnimateVisible2">Animation</div>
<div data-bind="cssLightSpeedVisible: isCssAnimateVisible3">Animation</div>

Такой подход увеличивает количество строк кода в моем проекте, но не дает такой гибкости. Тем не менее, это, вероятно, самая короткая привязка данных из всех.

Кто-нибудь знает, как лучше всего справиться с этим? Я больше всего хочу быть последовательным в своем подходе. Спасибо!