javascript - 延迟加载自定义绑定(bind)

Question

我正在开发一个单页应用程序，并且我们非常广泛地使用 Knockout。我们目前有一个可以单击的项目列表，这样做后，他们会将一些内容加载到模式容器中。下图说明了将触发显示各种内容的不同项目:

这些容器的内容有很大不同，并且可以在多个选项卡上分布许多不同的自定义绑定(bind)。图像中的项目相当简单，仅使用 Knockout 组件，但当我们开始显示模式内容时，它们对 JavaScript 的负担要大得多，因此使用绑定(bind)。

我最近添加了组件所需的 JavaScript 和 HTML 模板的延迟加载，效果非常好。我不得不使用自定义组件加载器，因为出于各种原因我们不想使用 require 或类似的 AMD 模块加载器。

现在我在自定义 knockout 绑定(bind)方面面临着同样的问题，因为我预计随着该产品的扩展，我们最终可以很容易地获得 10000 个绑定(bind)。不幸的是，似乎没有一种明显的方法可以像组件一样以惰性方式加载自定义绑定(bind)，我正在尝试找出是否有办法做到这一点，以及最好的方法是什么。请注意，我也不总是预先知道绑定(bind)的名称，有时我可能希望根据可观察的名称动态加载它们。

到目前为止，我唯一发现的值得注意的是，有一个 ko.getBindingHandler()可以重写的函数，但它需要同步加载绑定(bind)处理程序。

<小时/>

我已经想到了一种方法来尝试做到这一点，但它使用组件，感觉像是实现我的最终目标的一种非常落后的方式。它会是这样的:

替换通常的自定义绑定(bind):

<div data-bind="lineChart: $data"/> 

与

<div data-bind="component { name: compName, params: { vm: $data } }"/>

然后我会使用自定义组件加载器，它实际上只是加载绑定(bind)处理程序 JavaScript，并实质上写出一个占位符 div自定义绑定(bind)位于:

var bindingLoader = {
   getConfig: function(name, callback) {
      if(name.startsWith("binding-")) {
         callback({ binding: name.replace("binding-", ""), jsUrl: "/bindings/" + name });
         return;
      }
      callback(null);
   },
  loadComponent(name, componentConfig, callback) {
     var obj = { };
     obj.template = '<div data-bind="' + componentConfig.name + ': $data"/>';
     $.ajax({ url: componentConfig.jsUrl, dataType: "text" })
       .done(function(data)) {
           (new Function(data))();
           callback(obj);
     });
  }
}

但是我确信一定有更好的方法来实现这一目标，但我现在想不出任何其他选择。

Answer 1

我也在 Github 上回答过这个问题.

@Jeroen 是对的，没有内置的方法来异步加载自定义绑定(bind)。但是任何绑定(bind)都可以“延迟”执行自己的操作，这就是 component 绑定(bind)的作用。通过覆盖 ko.getBindingHandler，我们可以检测尚未加载的绑定(bind)，并启动加载过程，然后返回一个包装器绑定(bind)处理程序，该处理程序在加载后应用该绑定(bind)。

var originalGetBindingHandler = ko.getBindingHandler;
ko.getBindingHandler = function (bindingKey) {
    // If the binding handler is already known about then return it now
    var handler = originalGetBindingHandler(bindingKey);
    if (handler) {
        return handler;
    }

    if (bindingKey.startsWith("dl-")) {
        bindingKey = bindingKey.replace("dl-", "");
        if (ko.bindingHandlers[bindingKey]) {
            return ko.bindingHandlers[bindingKey];
        }

        // Work out the URL at which the binding handler should be loaded
        var url = customBindingUrl(bindingKey);

        // Load the binding from the URL
        var loading = $.getScript(url);

        return ko.bindingHandlers["dl-" + bindingKey] = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                // Once the binding is loaded, apply it to the element
                loading.done(function() { 
                    var binding = {};
                    binding[bindingKey] = valueAccessor;
                    ko.applyBindingAccessorsToNode(element, binding);
                });
                // Assumes that all dynamically loaded bindings will want to control descendant bindings
                return { controlsDescendantBindings: true };
            }
        }
    }
};

http://jsfiddle.net/mbest/e718a123/