Creating a knockoutJS custom binding for simple jQuery plugin

Question

Is there a general approach or at least a set of steps a KnockoutJS developer needs to take to create a binding for simple jquery plugins.

For example, if the plugin is triggered like this in "common code":

$('#tag1').tagsInput({ // my parameters here });

how would a simplest custom KO binding for this plugin look like?

Answer 1

Here is a common way, for example for jQuery button:

ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).button(options);
    }
};

<button data-bind="click: greet, jqButton: { icons: { primary: 'ui-icon-gear' } }">Test</button>

Read this article for some best practices: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html