angular.js (or knockout.js) integration with other UI libraries?

Question

I am going to use either knockout.js or angular.js libs (b/c of the binding support) for a web app.

My question is - how is your experience integrating these libs into existing UI libs like Dojo, jQueryUI, Ext.js, YUI,.. E.g. how is the usage of databinding suport/syntax in the UI libs? Do you have to implement something like custom binding in order to use the widget form UI lib?

Answer 1

For Knockout the situation is quite good. One can integrate with third-party widgets via custom bindings. Bindings API is very simple and strait-forward. All you need is to implement one or two methods (quoting Knockout docs):

ko.bindingHandlers.yourBindingName = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};

Most of the time implementing single update method is sufficient. There's even a collection of ready-made bindings for jQuery UI. It doesn't cover all jQuery UI widgets but since creating custom bindings is so simple you can implement your own bindings as you see need.

As for Angular JS the situation is more difficult. You can create a custom binding as a part of your own Directive. Directives API requires you to write much more code. The lifecycle of directives is quite complex, too. So, they would take quite a bit of time to learn.

At the same time it lets you specify a lot of different aspects of behavior. For example you can completely rewrite the inner HTML representation of a widget via directive and use Angular templates inside. In Knockout you'd need to use jQuery for that. Unfortunately, unlike custom bindings in Knockout directives are more suitable for writing your own widgets and not for integrating with existing ones.

To summarize:

• Knockout bindings are easier. Integrating with third-party widgets is easy.
• Angular directives are more suitable for writing your own widgets but are more powerful at the same time.

Answer 2

Typically you would implement custom bindings to work with external libraries, but there are often plenty of open source efforts that have already made considerable headway. Check out

https://github.com/SteveSanderson/knockout/wiki/Bindings

If there aren't any available, implementing your own isn't terribly complicated:

http://knockoutjs.com/documentation/custom-bindings.html