data-binding - angular.js(或 knockout.js)与其他 UI 库的集成？

Question

我将为 Web 应用程序使用 knockout.js 或 angular.js 库(绑定(bind)支持的 b/c)。

我的问题是 - 您将这些库集成到现有 UI 库(如 Dojo、jQueryUI、Ext.js、YUI 等)中的经验如何？
例如。 UI 库中数据绑定(bind)支持/语法的使用情况如何？您是否必须实现诸如自定义绑定(bind)之类的东西才能使用小部件表单 UI 库？

Answer 1

对于 knockout 情况相当不错。可以通过 custom bindings 与第三方小部件集成. Bindings API 非常简单和严格。您只需要实现一种或两种方法(引用 Knockout 文档):

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.
    }
};

大多数时候实现单个 update方法就足够了。甚至还有 a collection of ready-made bindings for jQuery UI .它没有涵盖所有 jQuery UI 小部件，但由于创建自定义绑定(bind)非常简单，您可以根据需要实现自己的绑定(bind)。

至于 Angular JS 情况更加困难。您可以创建自定义绑定(bind)作为您自己的一部分 Directive . Directives API 要求您编写更多代码。指令的生命周期也相当复杂。因此，他们将需要相当多的时间来学习。

同时，它允许您指定行为的许多不同方面。例如，您可以通过 directive 完全重写小部件的内部 HTML 表示。并在里面使用 Angular 模板。在 Knockout 中，您需要为此使用 jQuery。不幸的是，与 Knockout 指令中的自定义绑定(bind)不同，它更适合编写自己的小部件，而不适合与现有小部件集成。

总结一下:

knockout 绑定(bind)更容易。与第三方小部件集成很容易。

Angular 指令更适合编写自己的小部件，但同时也更强大。