knockout.js - 如何在 ko.applyBindings() 调用后应用组件绑定(bind)

Question

有没有办法在 ko.applyBindings() 调用之后应用组件绑定(bind)？

关键是，我使用 requireJS 来异步加载我的模块/组件。那么我怎么知道所有的绑定(bind)都被注册了呢？

Demo JS Fiddle

ko.applyBindings();

ko.components.register('my-component',
    {
        viewModel: function() {
            this.name = ko.observable('My Name');
        },
        template: '<input type="text" data-bind="value: name"></input>'
    }
);

// Moving it here, it works:
// ko.applyBindings();

Answer 1

您可以使用几个部分来动态理解和加载组件。

1- A custom component loader

您可以创建一个组件加载器，它可以从组件名称中理解需要哪些文件。

举个例子，假设任何以 my- 开头的组件，我们希望从 components按约定目录。

它可能看起来像:

//add a loader to the end of the list of loaders (one by default)
ko.components.loaders.push({
    getConfig: function(name, callback) {
        var widgetName;

        //see if this is one of our widgets
        if (name.indexOf("my-") > -1) {
            widgetName = name.substr(3).toLowerCase();

            //provide configuration for how to load the template/widget
            callback({
                require: "components/" + widgetName
            });
        } else {
            //tell KO that we don't know and it can move on to additional loaders
            callback(null);
        }
    },
    //use the default loaders functionality for loading
    loadComponent: ko.components.defaultLoader.loadComponent
});

如果默认加载器找不到组件(尚未注册)，那么这个加载器就会启动。

2- 我们仍然需要处理 custom elements ，因为这些也脱离了注册。该文档描述了 ko.components.getComponentNameForNode可以重写以将元素标记动态转换为组件名称的方法。

在我们的例子中，这可能看起来像:

var existingGetComponentNameForNode = ko.components.getComponentNameForNode;
ko.components.getComponentNameForNode = function(node) {
    var tagNameLower = node.tagName && node.tagName.toLowerCase();

    //if we found one of our tags, then use it as the component name
    if (tagNameLower.indexOf("my-") > -1) {
        return tagNameLower;
    }

    // call the original
    return existingGetComponentNameForNode.apply(this, arguments);
};

这是一个将这些与 require.js 放在一起的 fiddle : http://jsfiddle.net/rniemeyer/tgm8wn7n/

另外，请注意 IE6-8 警告 here ，因为它会影响动态理解自定义元素。

或者，您需要确保在 UI 中绑定(bind)该组件之前注册所有组件(不一定在初始 applyBindings 时，而是在遇到需要绑定(bind)的组件时)。