在自定義組件加載器中通過`createViewModel`函數更改模板

Question

在敲門js中，我有一個自定義組件加載器，在其中執行一些邏輯。 基本上，我想從createViewModel函數更改模板。 我知道有componentInfo.templateNodes但我不知道該怎么辦。

我想在createViewModel函數中更改它的原因是因為每次顯示組件時都會調用createViewModel函數。

Ahwell，代碼比單詞更能說明問題，因此請在此處自行檢查。

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