javascript - 从自定义组件加载器中的“createViewModel”函数更改模板

Question

在 knockoutjs 中，我有一个自定义组件加载器，我在其中执行一些逻辑。基本上我想从 createViewModel 函数中更改模板。我知道有，componentInfo.templateNodes但我不知道如何处理它。

我想在 createViewModel 函数中更改它的原因是因为每次显示组件时都会调用 createViewModel 函数。

啊，代码比文字更能说明问题，所以请自己在这里查看。

ko.components.loaders.unshift({
    getConfig: function (name, callback) {
        var component;  // The component gets loaded somewhere. (Sadly I can't alter the template here because it is only called once.)

        callback({
            viewModel: {
                createViewModel: function (params, componentInfo) {
                    // Load these parameters somewhere
                    var args;
                    var location;

                    // I'd love to add these two items before and after my template.
                    var before = "<div data-bind=\"with: " + location + "\">";
                    var after = "</div>";

                    // Construct a viewModel with the data provided. 
                    return app.core.helpers.construct(component.viewModel, location, args);
                }
            },
            template: component.template
        });
    },

    loadTemplate: function (name, template, callback) {
        // Get the location again.
        var location;

        // I just want to load the template while applying the correct binding scope from the createViewModel.
        var templateString = "<!-- ko stopBinding: true -->\n<!-- ko with: " + location + " -->\n" + template + "\n<!-- /ko -->\n<!-- /ko -->";

        // Just let it load.
        ko.components.defaultLoader.loadTemplate(name, templateString, callback);
    }
});

Answer 1

我设法创建了一个可行的解决方案（尽管还处于起步阶段）。由于我仍然不知道如何将模板代码添加到 componentInfo，我发现可以编辑 componentInfo 中可用的内容。（请参阅下面的解决方案）

ko.components.loaders.unshift({
    getConfig: function (name, callback) {
        var component;

        callback({
            viewModel: {
                createViewModel: function (params, componentInfo) {
                    // Load these parameters somewhere
                    var args;
                    var location;

                    /*
                     *  The first one is the element we're binding on. The next sibling is the element we probably want to alter.
                     */ 
                    if (componentInfo.element.nextSibling.nodeType == 8 && componentInfo.element.nextSibling.nodeValue.indexOf("[injectNamespace]") > -1) {
                        componentInfo.element.nextSibling.nodeValue =  "ko with: models." + name.replace('/', '.');
                    }

                    return app.core.helpers.construct(component.viewModel, location, args);
                }
            },
            template: component.template
        });
    },

    loadTemplate: function (name, template, callback) {
        var templateString = "<!-- ko with: [injectNamespace] -->\n" + template + "\n<!-- /ko -->";

        ko.components.defaultLoader.loadTemplate(name, templateString, callback);
    }
});